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

});

View Code

你也能够在gist看整个gulpfile。我也将达到相同任务的Gruntfile放在同一个gist，方便作比较。