在次淺談gulp前端自動化構建工具

在次淺談gulp前端自動化構建工具

~~~~(>_<)~~~~前幾天寫了一個gulp總結，偶然之間發現了阮大神寫的gulp教程，頓時，感受本身寫的就是渣渣啊！因此，今天學習下阮大大的教程，對於上一篇gulp文章深深的自責，侮辱了各位看官的眼，表示深深的自責。

gulp是一個自動化的任務運行工具，會按照咱們預先設定的順序自動執行一系列的任務，這樣能夠提升咱們的工做效率，尤爲是在這個以時間換金錢的時代。(*^__^*) 嘻嘻……

1.安裝

gulp基於node平臺，因此首先須要安裝node環境，安裝完node環境以後，能夠執行下面的命令。

npm install -g gulp

npm install --save-dev gulp

安裝gulp以外，還須要安裝gulp的插件模塊，下面以安裝gulp-uglify模塊爲演示。

執行下面的命令

npm install --save-dev gulp-uglify

2.gulpfile.js

在項目的根目錄下建立gulpfile.js文件。

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
  gulp.src('js/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'))
});

上面代碼中，gulpfile.js加載gulp和gulp-uglify模塊以後，使用gulp模塊的task方法指定任務minify。task方法有兩個參數，第一個是任務名，第二個是任務函數。在任務函數中，使用gulp模塊的src方法，指定所要處理的文件，而後使用pipe方法，將上一步的輸出轉爲當前的輸入，進行鏈式處理。

task方法的回調函數使用了兩次pipe方法，也就是說作了兩種處理。第一種處理是使用gulp-uglify模塊，壓縮源碼；第二種處理是使用gulp模塊的dest方法，將上一步的輸出寫入本地文件，這裏是build.js（代碼中省略了後綴名js）。

執行minify任務時，就在項目目錄中執行下面命令就能夠了。

gulp minify

3.gulp模塊的方法

3.1src()

gulp模塊的src方法，用於產生數據流。它的參數表示所要處理的文件，這些指定的文件會轉換成數據流。參數的寫法通常有如下幾種形式。

• js/app.js：指定確切的文件名。
• js/*.js：某個目錄全部後綴名爲js的文件。
• js/**/*.js：某個目錄及其全部子目錄中的全部後綴名爲js的文件。
• !js/app.js：除了js/app.js之外的全部文件。
• *.+(js css)：匹配項目根目錄下，全部後綴名爲js或css的文件。

src方法的參數還能夠是一個數組，用來指定多個成員。

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

3.2dest()

dest方法將管道的輸出寫入文件，同時將這些輸出繼續輸出，因此能夠依次調用屢次dest方法，將輸出寫入多個目錄。若是有目錄不存在，將會被新建。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

dest方法還能夠接受第二個參數，表示配置對象。

gulp.dest('build', {
  cwd: './app',
  mode: '0644'
})

配置對象有兩個字段。cwd字段指定寫入路徑的基準目錄，默認是當前目錄；mode字段指定寫入文件的權限，默認是0777。

3.3task()

task方法用於定義具體的任務。它的第一個參數是任務名，第二個參數是任務函數。下面是一個很是簡單的任務函數。

gulp.task('greet', function () {
   console.log('Hello world!');
});

task方法還能夠指定按順序運行的一組任務。

gulp.task('build', ['css', 'js', 'imgs']);

上面代碼先指定build任務，它由css、js、imgs三個任務所組成，task方法會併發執行這三個任務。注意，因爲每一個任務都是異步調用，因此沒有辦法保證js任務的開始運行的時間，正是css任務運行結束。

若是但願各個任務嚴格按次序運行，能夠把前一個任務寫成後一個任務的依賴模塊。

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

上面代碼代表，css任務依賴greet任務，因此css必定會在greet運行完成後再運行。

task方法的回調函數，還能夠接受一個函數做爲參數，這對執行異步任務很是有用。

// 執行shell命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // build Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // return error
    cb(); // finished task
  });
});

若是一個任務的名字爲default，就代表它是「默認任務」，在命令行直接輸入gulp命令，就會運行該任務。

gulp.task('default', function () {
  // Your default task
});

// 或者

gulp.task('default', ['styles', 'jshint', 'watch']);

執行的時候，直接使用gulp，就會運行styles、jshint、watch三個任務。

3.4watch()

watch方法用於指定須要監視的文件。一旦這些文件發生變更，就運行指定任務。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

上面代碼指定，一旦templates目錄中的模板文件發生變化，就運行build任務。

watch方法也能夠用回調函數，代替指定的任務。

gulp.watch('templates/*.tmpl.html', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

另外一種寫法是watch方法所監控的文件發生變化時（修改、增長、刪除文件），會觸發change事件。能夠對change事件指定回調函數。

var watcher = gulp.watch('templates/*.tmpl.html', ['build']);

watcher.on('change', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

除了change事件，watch方法還可能觸發如下事件。

• end：回調函數運行完畢時觸發。
• error：發生錯誤時觸發。
• ready：當開始監聽文件時觸發。
• nomatch：沒有匹配的監聽文件時觸發。

watcher對象還包含其餘一些方法。

• watcher.end()：中止watcher對象，不會再調用任務或回調函數。
• watcher.files()：返回watcher對象監視的文件。
• watcher.add(glob)：增長所要監視的文件，它還能夠附件第二個參數，表示回調函數。
• watcher.remove(filepath)：從watcher對象中移走一個監視的文件。

4.gulp-load-plugins模塊

通常狀況下，gulpfile.js中的模塊須要一個個加載。

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

上面代碼中，除了gulp模塊之外，還加載另外三個模塊。

這種一一加載的寫法，比較麻煩。使用gulp-load-plugins模塊，能夠加載package.json文件中全部的gulp模塊。上面的代碼用gulp-load-plugins模塊改寫，就是下面這樣。

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

上面代碼假設package.json文件包含如下內容。

{
   "devDependencies": {
      "gulp-concat": "~2.2.0",
      "gulp-uglify": "~0.2.1",
      "gulp-jshint": "~1.5.1",
      "gulp": "~3.5.6"
   }
}

5.gulp-livereload模塊

gulp-livereload模塊用於自動刷新瀏覽器，反映出源碼的最新變化。它除了模塊之外，還須要在瀏覽器中安裝插件，用來配合源碼變化。

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload'),
    watch = require('gulp-watch');

gulp.task('less', function() {
   gulp.src('less/*.less')
      .pipe(watch())
      .pipe(less())
      .pipe(gulp.dest('css'))
      .pipe(livereload());
});

上面代碼監視less文件，一旦編譯完成，就自動刷新瀏覽器。

最後附上本身前一年前寫的一個自動化任務，僅供參考：

// 載入Gulp模塊
var gulp = require('gulp');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('style', function() {
  gulp.src('src/styles/*.less')
    .pipe(less())
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(reload({
      stream: true
    }));
});

gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(reload({
      stream: true
    }));
});

gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(reload({
      stream: true
    }));
})

gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      collapseBooleanAttributes: true,
      removeAttributeQuotes: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
    }))
    .pipe(gulp.dest('dist'))
    .pipe(reload({
      stream: true
    }));
});

gulp.task('serve', ['style', 'script', 'image', 'html'], function() {
  browserSync({
    notify: false,
    port: 2015,
    server: {
      baseDir: ['dist']
    }
  });


  gulp.watch('src/styles/*.less', ['style']);
  gulp.watch('src/scripts/*.js', ['script']);
  gulp.watch('src/images/*.*', ['image']);
  gulp.watch('src/*.html', ['html']);
});

在github上面的地址：風流倜儻小小張