前端构建大法 Gulp 系列 (四)：gulp实战

• 前端构建大法 Gulp 系列 (一)：为何须要前端构建

• 前端构建大法 Gulp 系列 (二)：为何选择gulp

• 前端构建大法 Gulp 系列 (三)：gulp的4个API 让你成为gulp专家

• 前端构建大法 Gulp 系列 (四)：gulp实战

前面讲了不少理论，那么这一节咱们将讲一些实战的例子

安装Node.js

先在命令行下输入 node -v 检查一下是否装了node, 若是没有请参考 https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager 安装

而后再用 npm -v 来确保Node.js 安装正确

安装 Gulp

咱们可使用npm来安排装Gulp, 为了能够在命令行全局使用，咱们安装到全局，另外确保其它的程序员可使用，咱们保存到项目的package.json里

npm install gulp -g

建立项目

建立一个文件目录，而后创建对应的文件夹

• src — 源文件:
  • images 
  • scripts 
  • styles 
• build — 编译后文件输出到的生产文件夹:
  • images 
  • scripts 
  • styles 

咱们先使用npm init来建立相似Nuget package的package.config同样的文件，这样咱们就知道项目依赖哪些插件，并且咱们不须要把插件提交到代码库，其它程序员只须要使用 npm install 就能够安装全部配置的插件

而后咱们须要建立一个gulpfile.js文件，gulp默认是调用这个文件的。

咱们在目录下使用

npm install gulp --save-dev  # 这样能够把gulp安装到本地

使用插件

好比咱们想检查咱们的js文件，那么咱们须要安装 gulp-jshint插件

npm install gulp-jshint --save-dev

而后添加一个test.js文件到src/scripts下，内容以下

var hi="hello"

function sayHello(){
    console.log("Jack "+hi)
}

jshint 代码检查

而后咱们修改gulpfile.js内容以下

// include gulp
var gulp = require('gulp'); 

// include plug-ins
var jshint = require('gulp-jshint');

// JS hint task
gulp.task('jshint', function() {
    gulp.src('./src/scripts/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
});

而后运行

gulp jshint

看控制台输出就知道咱们少了分号。

代码合并压缩

咱们新建一个 ./scripts/b.js， 而后咱们把js文件合并而后压缩并输出到./build/scripts/all.js 下，同时移除debug信息

咱们须要安装一下插件

npm install gulp-concat --save-dev 
npm install gulp-strip-debug --save-dev 
npm install gulp-uglify --save-dev

修改gulpfile.js

var gulp = require('gulp'); 
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  gulp.src(['./src/scripts/*.js'])
    .pipe(concat('all.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
});

咱们看到gulp已经把咱们文件合并了，移除了console.log, 并且进行了压缩。

至此，已经基本上知道gulp怎么使用了，下面展现一些其它的功能的代码

npm install gulp-autoprefixer --save-dev 
npm install gulp-minify-css --save-dev

示例代码

var gulp = require('gulp'); 
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

gulp.task('scripts', function() {
  gulp.src(['./src/scripts/*.js'])
    .pipe(concat('all.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
});


// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  gulp.src(['./src/styles/*.css'])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./build/styles/'));
});

// default gulp task
gulp.task('default', [ 'scripts', 'styles'], function() {   

// watch for JS changes
gulp.watch('./src/scripts/*.js', function() {
    gulp.run('jshint', 'scripts');
  });
// watch for CSS changes
    gulp.watch('./src/styles/*.css', function() {
        gulp.run('styles');
  });
});

至此，你们应该熟悉gulp的使用，尽情去挖掘gulp plugin的宝藏吧。