gulp入門指南

時間 2019-11-13

原文原文鏈接

Grunt靠邊，全新的建構工具來了。Gulp的code-over-configuration不僅讓撰寫任務(tasks)更加容易，也更好閱讀及維護。javascript

Glup使用node.js串流(streams)讓建構更快速，不須寫出資料到硬盤的暫存檔案/目錄。若是你想了解更多有關串流–雖然不是必須的–你能夠閱讀這篇文章。Gulp利用來源檔案看成輸入，串流到一羣外掛(plugins)，最後取得輸出的結果，並不是配置每個外掛的輸入與輸出–就像Grunt。讓咱們來看個範例，分別在Gulp及Grunt建構Sass：css

Grunt:html

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']);

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

Gulp:node

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

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

因此，有趣了，如今要？讓咱們開始安裝gulp並創建一個基本的gulpfile，包含幾個核心任務來做爲入門吧。ios

安裝gulp

深刻設置任務以前，需先安裝gulp：git

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

上述指令將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)

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

指令將會安裝必要的外掛，並紀錄於package.json內的devDependencies物件。完整的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');

呼！看起來比Grunt有更多的事要作，對吧？Gulp外掛跟Grunt外掛有些許差別–它被設計成作一件事而且作好一件事。例如；Grunt的imagemin利用快取來避免重複壓縮已經壓縮好的圖片。在Gulp中，這必須透過一個快取外掛來達成，固然，快取外掛也能夠拿來快取其餘東西。這讓建構過程當中增長了額外的彈性層面。蠻酷的，哼？

咱們也能夠像Grunt同樣自動載入全部已安裝的外掛，但這不在此文章目的，因此咱們將維持在手動的方式。