前面講了很多理論，那么這一節(jié)我們將講一些實(shí)戰(zhàn)的例子

安裝Node.js

先在命令行下輸入 node -v 檢查一下是否裝了node, 如果沒(méi)有請(qǐng)參考 https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager 安裝

然后再用 npm -v 來(lái)確保Node.js 安裝正確

安裝 Gulp

我們可以使用npm來(lái)安排裝Gulp, 為了可以在命令行全局使用，我們安裝到全局，另外確保其它的程序員可以使用，我們保存到項(xiàng)目的package.json里

npm install gulp -g

創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)文件目錄，然后建立對(duì)應(yīng)的文件夾

• src — 源文件:

  • images
  • scripts
  • styles

• build — 編譯后文件輸出到的生產(chǎn)文件夾:

  • images
  • scripts
  • styles

我們先使用npm init來(lái)創(chuàng)建類似Nuget package的package.config一樣的文件，這樣我們就知道項(xiàng)目依賴哪些插件，而且我們不需要把插件提交到代碼庫(kù)，其它程序員只需要使用 npm install 就可以安裝所有配置的插件

然后我們需要?jiǎng)?chuàng)建一個(gè)gulpfile.js文件，gulp默認(rèn)是調(diào)用這個(gè)文件的。

我們?cè)谀夸浵率褂?/p>

  npm install gulp --save-dev  # 這樣可以把gulp安裝到本地

Paste_Image.png

使用插件

比如我們想檢查我們的js文件，那么我們需要安裝 gulp-jshint插件

  npm install gulp-jshint --save-dev

然后添加一個(gè)test.js文件到src/scripts下，內(nèi)容如下

var hi="hello"

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

jshint 代碼檢查

然后我們修改gulpfile.js內(nèi)容如下

// 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'));
});

然后運(yùn)行

gulp jshint

Paste_Image.png

看控制臺(tái)輸出就知道我們少了分號(hào)。

代碼合并壓縮

我們新建一個(gè) ./scripts/b.js， 然后我們把js文件合并然后壓縮并輸出到./build/scripts/all.js 下，同時(shí)移除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/'));
});

Paste_Image.png

我們看到gulp已經(jīng)把我們文件合并了，移除了console.log, 而且進(jìn)行了壓縮。

至此，已經(jīng)基本上知道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');
  });
});

至此，大家應(yīng)該熟悉gulp的使用，盡情去挖掘gulp plugin的寶藏吧。