Gulp入門教程

時間 2019-12-06

原文原文鏈接

最近流行前端構建工具，苦於以前使用Grunt，代碼很難閱讀，如今出了Gulp，真是擺脫了痛苦。發現了一篇很好的Gulp英文教程，整理翻譯給你們看看。css

爲何使用Gulp

Gulp基於Node.js的前端構建工具，經過Gulp的插件能夠實現前端代碼的編譯（sass、less）、壓縮、測試；圖片的壓縮；瀏覽器自動刷新，還有許多強大的插件能夠在這裏查找。比起Grunt不只配置簡單並且更容易閱讀和維護，咱們能夠作一個對比：前端

Grunt:

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插件將main.sass文件編譯成main.css文件，接着autoprefixer插件再對編譯好的main.css文件進行修改，最後覆蓋main.css。那麼覆蓋文件就是多餘的了，有沒辦法作到sass和autoprefixer一併處理完再生成main.css？咱們來看看Gulp是如何作到的：android

Gulp：

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咱們只須要放一個路徑，經過管道方式使用插件，最後生成文件，是否是有種jQuery的感受。這種方式不只提升效率並且一眼就看清了輸入文件和輸出文件，不再用看gruntfile看得眼花繚亂了。ios

再打個比喻，Grunt的插件就像獨立的工廠，這個工廠生成出來的產品打包封裝好後再送到另外一個工廠去加工，使用了Gulp後實現了工廠的合併，全部東西都在一個工廠裏完成了。如今是否對Gulp感興趣了，那就開始使用Gulp吧！git

安裝

首先咱們要全局安裝一遍：github

$ npm install gulp -g

接着咱們要進去到項目的根目錄再安裝一遍（確保你根目錄存在package.json文件）：正則表達式

$ npm install gulp --save-dev

—save-dev這個屬性會將條目保存到你package.json的devDependencies裏面npm

安裝Gulp插件

咱們將要使用Gulp插件來完成咱們如下任務：json

sass的編譯（gulp-ruby-sass）
自動添加css前綴（gulp-autoprefixer）
壓縮css（gulp-minify-css）
js代碼校驗（gulp-jshint）
合併js文件（gulp-concat）
壓縮js代碼（gulp-uglify）
壓縮圖片（gulp-imagemin）
自動刷新頁面（gulp-livereload）
圖片緩存，只有圖片替換了才壓縮（gulp-cache）
更改提醒（gulp-notify）
清除文件（del）

安裝這些插件須要運行以下命令：gulp

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

上面是一些經常使用的插件，若是想要找更多的插件點擊這裏

加載插件

接着咱們要建立一個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'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

Gulp的插件和Grunt有些許不同，Grunt插件是爲了更好的完成一項任務。就像Grunt的imagemin插件就利用了緩存來避免重複壓縮，而Gulp要利用gulp-cache來完成，固然啦，不只限定於緩存圖片。

創建任務

編譯sass、自動添加css前綴和壓縮

首先咱們編譯sass，添加前綴，保存到咱們指定的目錄下面，還沒結束，咱們還要壓縮，給文件添加.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' }));
});

讓我解釋一下：

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

gulp.task這個API用來建立任務，在命令行下能夠輸入$ gulp styles來執行上面的任務。

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

gulp.src這個API設置須要處理的文件的路徑，能夠是多個文件以數組的形式[main.scss, vender.scss]，也能夠是正則表達式/**/*.scss。

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

咱們使用.pipe()這個API將須要處理的文件導向sass插件，那些插件的用法能夠在github上找到，爲了方便你們查找我已經在上面列出來了。

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

gulp.dest()API設置生成文件的路徑，一個任務能夠有多個生成路徑，一個能夠輸出未壓縮的版本，另外一個能夠輸出壓縮後的版本。

爲了更好的瞭解Gulp API，強烈建議看一下Gulp API文檔，其實Gulp API就這麼幾個，沒什麼好可怕的。

js代碼校驗、合併和壓縮

但願你們已經知道如何去建立一個任務了，接下來咱們完成scripts的校驗、合併和壓縮的任務吧：

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

須要提醒的是咱們要設置JSHint的reporter方式，上面使用的是default默認的，瞭解更多點擊這裏。

壓縮圖片

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

這個任務使用imagemin插件把全部在src/images/目錄以及其子目錄下的全部圖片（文件）進行壓縮，咱們能夠進一步優化，利用緩存保存已經壓縮過的圖片，使用以前裝過的gulp-cache插件，不過要修改一下上面的代碼：

將這行代碼:

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

修改爲:

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

如今，只有新建或者修改過的圖片纔會被壓縮了。

清除文件

在任務執行前，最好先清除以前生成的文件：

gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});

在這裏沒有必要使用Gulp插件了，可使用NPM提供的插件。咱們用一個回調函數（cb）確保在退出前完成任務。

設置默認任務（default）

咱們在命令行下輸入$ gulp執行的就是默認任務，如今咱們爲默認任務指定執行上面寫好的三個任務：

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

在這個例子裏面，clean任務執行完成了纔會去運行其餘的任務，在gulp.start()裏的任務執行的順序是不肯定的，因此將要在它們以前執行的任務寫在數組裏面。

監聽文件

爲了監聽文件的是否修改以便執行相應的任務，咱們須要建立一個新的任務，而後利用gulp.watchAPI實現：

gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('src/images/**/*', ['images']);
});

咱們將不一樣類型的文件分開處理，執行對應的數組裏的任務。如今咱們能夠在命令行輸入$ gulp watch執行監放任務，當.sass、.js和圖片修改時將執行對應的任務。

自動刷新頁面

Gulp也能夠實現當文件修改時自動刷新頁面，咱們要修改watch任務，配置LiveReload：

gulp.task('watch', function() {
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});

要使這個可以工做，還須要在瀏覽器上安裝LiveReload插件，除此以外還能這樣作

全部

/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 */
// Load plugins
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'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');
// Styles
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' }));
});
// Scripts
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' }));
});
// Images
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' }));
});
// Clean
gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);
  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('src/images/**/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});

在gist上有源碼，而且附上Grunt的實現做爲對比。