gulp的使用指南

時間 2019-11-14

原文原文鏈接

Glup使用node.js串流(streams)讓建構更快速。Gulp利用來源檔案看成輸入，串流到一羣外掛(plugins)，最後取得輸出的結果，並不是Grunt配置每個外掛的輸入與輸出。讓咱們來看個範例，分別在Gulp及Grunt建構Sass：css

Grunt:node

sass: {  
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {  
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

View Code

Grunt須要各別配置外掛，指定其來源與目的路徑。例如，咱們將一個檔案做爲外掛Sass的輸入，並儲存輸出結果。在設置Autoprefixer時，須要將Sass的輸出結果做爲輸入，產生出一個新檔案。來看看在Gulp中一樣的配置：android

Gulp:ios

gulp.task('sass', function() {  
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

View Code

在Gulp中咱們只須要輸入一個檔案便可。通過外掛Sass處理，再傳到外掛Autoprefixer，最終取得一個檔案。這樣的流程加快建構過程，省去讀取及寫出沒必要要的檔案，只須要最終的一個檔案。git

安裝gulp

$ npm install gulp -g

這會將gulp安裝到全域環境下，讓你能夠存取gulp的CLI。接著，須要在本地端的專案進行安裝。cd到你的專案根目錄，執行下列指令(請先肯定你有package.json檔案)：github

$ npm install gulp --save-dev

上述指令將gulp安裝到本地端的專案內，並紀錄於package.json內的devDependencies物件。npm

安裝gulp外掛

編譯Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
縮小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
醜化(Uglify) (gulp-uglify)
圖片壓縮 (gulp-imagemin)
即時重整(LiveReload) (gulp-livereload)
清理檔案 (gulp-clean)
圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
更動通知 (gulp-notify)

執行下列指令來安裝這些外掛:json

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

指令將會安裝必要的外掛，並紀錄於package.json內的devDependencies物件。完整的gulp外掛清單能夠在這裡找到。 gulp

載入外掛

接下來，咱們須要創建一個gulpfile.js檔案，而且載入這些外掛：瀏覽器

var gulp = require('gulp'),  
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

View Code

創建任務

首先，咱們設置編譯Sass。咱們將編譯Sass、接著經過Autoprefixer，最後儲存結果到咱們的目的地。接著產生一個縮小化的.min版本、自動從新整理頁面及通知任務已經完成：

gulp.task('styles', function() {  
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

View Code

解釋說明

gulp.task('styles', function() { ... )};

這個gulp.taskAPI用來創建任務。能夠透過終端機輸入$ gulp styles指令來執行上述任務。

return gulp.src('src/styles/main.scss')

這個gulp.srcAPI用來定義一個或多個來源檔案。容許使用glob樣式，例如/**/*.scss比對多個符合的檔案。傳回的串流(stream)讓它成爲非同步機制，因此在咱們收到完成通知以前，確保該任務已經所有完成。

.pipe(sass({ style: 'expanded' }))

使用pipe()來串流來源檔案到某個外掛。外掛的選項一般在它們各自的Github頁面中能夠找到。上面列表中我有留下各個外掛的連結，讓你方便使用。

.pipe(gulp.dest('dist/assets/css'));

這個gulp.dest()API是用來設定目的路徑。一個任務能夠有多個目的地，一個用來輸出擴展的版本，一個用來輸出縮小化的版本。這個在上述的styles任務中已經有展現。

JSHint，拼接及縮小化JavaScript

接下來，咱們將設定腳本任務，包括lint、拼接及醜化:

gulp.task('scripts', function() {  
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

View Code

一件事提醒，咱們須要指定JSHint一個reporter。這裡我使用預設的reporter，適用於大多數人。更多有關此設定，你能夠在JSHint網站取得。

圖片壓縮

接著，咱們將設定圖片壓縮:

gulp.task('images', function() {  
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images task complete' }));
});

View Code

這會將對全部來源圖片進行imagemin處理。咱們能夠稍微更進一步，利用快取保存已經壓縮過的圖片，以便每次進行此任務時不須要再從新壓縮。這裡只須要gulp-cache外掛–稍早已經安裝。咱們須要額外設置才能使用這個外掛，所以修改這段程式碼:

.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

成爲這段:

.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

如今只有新的或更動的圖片會被壓縮。

收拾乾淨!

在咱們進行佈署以前，清除目的地目錄並重建檔案是一個好主意–以防萬一任何已經被刪除的來源檔案遺留在目的地目錄之中:

gulp.task('clean', function() {  
  return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false})
    .pipe(clean());
});

View Code

咱們能夠傳入一個目錄(或檔案)陣列到gulp.src。由於咱們不想要讀取已經被刪除的檔案，咱們能夠加入read: false選項來防止gulp讀取檔案內容–讓它快一些。

預設任務

咱們能夠創建一個預設任務，當只輸入$ gulp指令時執行的任務，這裡執行三個咱們所創建的任務:

gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts', 'images');
});

View Code

注意額外傳入gulp.task的陣列。這裡咱們能夠定義任務相依(task dependencies)。在這個範例中，gulp.start開始任務前會先執行清理(clean)任務。Gulp中全部的任務都是並行(concurrently)執行，並無前後順序哪一個任務會先完成，因此咱們須要確保clean任務在其餘任務開始前完成。

注意: 透過相依任務陣列來執行clean而非gulp.start是通過考慮的，在這個情境來看是最好的選擇，以確保清理任務所有完成。

看守

爲了可以看守檔案，並在更動發生後執行相關任務，首先須要創建一個新的任務，使用gulp.watchAPI來看守檔案:

gulp.task('watch', function() {

  // 看守全部.scss檔
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // 看守全部.js檔
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // 看守全部圖片檔
  gulp.watch('src/images/**/*', ['images']);

});

View Code

透過gulp.watch指定想要看守的檔案，而且透過相依任務陣列定義任務。執行$ gulp watch來開始看守檔案，任何.scss、.js或圖片檔案一旦有了更動，便會執行相對應的任務。

即時重整(LiveReload)

Gulp也能夠處理檔案更動後，自動從新整理頁面。咱們須要修改watch任務，設置即時重整伺服器。

gulp.task('watch', function() {

  // 創建即時重整伺服器
  var server = livereload();

  // 看守全部位在 dist/  目錄下的檔案，一旦有更動，便進行重整
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
  });

});

View Code

爲了讓這個功能有效，除了伺服器以外，還須要安裝並啓用LiveReload的瀏覽器外掛。或者你也能夠手動加上這個片斷程式碼。

所有在一塊兒

這裡是完整的gulpfile:

// 載入外掛
var gulp = require('gulp'),  
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

// 樣式
gulp.task('styles', function() {  
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

// 腳本
gulp.task('scripts', function() {  
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

// 圖片
gulp.task('images', function() {  
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

// 清理
gulp.task('clean', function() {  
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});

// 預設任務
gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts', 'images');
});

// 看手
gulp.task('watch', function() {

  // 看守全部.scss檔
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // 看守全部.js檔
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // 看守全部圖片檔
  gulp.watch('src/images/**/*', ['images']);

  // 創建即時重整伺服器
  var server = livereload();

  // 看守全部位在 dist/  目錄下的檔案，一旦有更動，便進行重整
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
  });

});