simplify the life

Gulp 常用插件

插件使用注意事项:

  1. 插件需要先 npm/cnpm install xx --save-dev
  2. gulp taskname,如果 task 已经设置成 default 的依赖,直接 gulp 即可
  3. task 中的文件路径都是相对 gulpfile.js 的
  4. gulp.dest() 指向的目录不存在,会被创建
  5. task 中的 gulp.src 前记得加上 return(注意我下面的示例很多并没有加)。为什么要加参考 Gulp 入门 中 「6. API 参考」src 一节

JS 压缩、合并、重命名

let gulp = require('gulp');
let concat = require('gulp-concat');  // 合并
let uglify = require('gulp-uglify');  // 压缩
let rename = require('gulp-rename');  // 重命名
let jshint = require('gulp-jshint');  // 注意需要同时安装 jshint

gulp.task('scripts', function() {  // 这个任务的名称是 scripts
  gulp.src('src/js/*.js')  // 将 src/js/ 目录下的所有 js 文件合并
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('all.js'))  // 指定合并后的文件名为 all.js
    .pipe(gulp.dest('dist/js/'))  // 保存合并后的文件
    .pipe(uglify())  // 压缩
    // .pipe(rename('all.min.js'))  // 重命名
    .pipe(rename({suffix: '.min'}))  // 和上一行等效
    .pipe(gulp.dest('dist/js/'));
});

Sass 编译

let gulp = require('gulp');
let sass = require('gulp-sass');  // sass -> css
let prefixer = require('gulp-autoprefixer');  // 增加前缀
let minify = require('gulp-minify-css');  // css 压缩
let notify = require('gulp-notify');  // 打印提醒语句
let concat = require('gulp-concat');  // 合并

// 编译Sass
gulp.task('css', function() {  // 任务名
  gulp.src('sass/*.scss')  // 目标 sass 文件
    .pipe(sass())  // sass -> css
    .pipe(prefixer('last 2 versions'))  // 参数配置参考 <https://github.com/ai/browserslist>
    .pipe(minify())  // 压缩
    .pipe(gulp.dest('css'))  // 目标目录
    .pipe(notify({message: 'done'}))
    .pipe(concat('all.min.css'))  // 合并
    .pipe(gulp.dest('css'));  // 目标目录
});

图片压缩

let gulp = require('gulp');
let imagemin = require('gulp-imagemin');
let cache = require('gulp-cache');  // 减少重复压缩

gulp.task('images', function() {
  gulp.src('src/images/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images/'));
});

监控文件

gulp.task('watch', function() {  // 指定任务名为 watch
  // 监控 a.scss 文件,如果有修改,则执行 sass 任务
  gulp.watch('src/sass/a.scss', ['sass']);
});

注意先要用 gulp watch 开启监听,或者直接将 watch 任务设置为 default 的依赖

删除文件

let gulp = require('gulp');
let clean = require('gulp-clean');

gulp.task('clean', function() {
  return gulp.src(['dist/js/*', 'dist/sass/*', 'dist/images/*'], {read: false})
    .pipe(clean());
});

gulp-load-plugins 模块

如果引入的插件很多,可以尝试用 gulp-load-plugins 模块,它会将 package.json 中的依赖全部引入。

let gulp = require('gulp');
// let sass = require('gulp-sass');
// let minify = require('gulp-minify-css');
// let notify = require('gulp-notify');
let gulpLoadPlugins = require('gulp-load-plugins');
let plugins = gulpLoadPlugins();

// 编译Sass
gulp.task('sass', function() {  // 任务名
  gulp.src('src/sass/a.scss')  // 目标 sass 文件
    .pipe(plugins.sass({ style: 'compressed' }))  // sass -> css
    .pipe(plugins.minifyCss())
    .pipe(plugins.notify({message: '压缩完了'}))
    .pipe(gulp.dest('sass', {
      cwd: 'dist',  // 实际目录 dist/sass/
      mode: '0644'
    }));  // 目标目录
});

热重载

使用 broswer-sync 模块。

目录结构如下(src 中的 a.scss 编译成 dist 中的 a.css):

dist
  sass
    a.css
  index.html
src
  sass
    a.scss

其中,index.html 引用了 a.css,我们希望在修改 a.scss 的时候,及时编译 sass 文件,然后 index.html 能够在浏览器中重新载入。

配置不是很难,参考官方文档 https://browsersync.io/docs/gulp(中文文档在 这里)。但是被一个问题困扰了半天,浏览器打死不重载,但是在 CLI 中已经提示 "Reloading Browsers...",最后在其 GitHub 的某个 issue 中找到了答案,原来我的 HTML 文件没有写 body 标签,于是 broswer-sync 无法注入某段 js 文件。后来查到官方文档也有 说明

Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions

卧槽这是逼我以后写 demo 写完整标签啊 ... 惨痛的教训

let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;

gulp.task('server', ['css'], function() {
  browserSync.init({
    server: {
      baseDir: 'dist'  // 根目录,index.html 文件所在的目录
    }
  });

  // sass 文件一改动就重新编译成 css
  gulp.watch('src/sass/*.scss', ['css']);

  // html 文件一改动,就重载页面
  gulp.watch("dist/*.html").on('change', reload);
});

// sass -> css
gulp.task('css', function() {  // 任务名
  return gulp.src('src/sass/a.scss')  // 目标 sass 文件
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest('dist/sass'))  // 目标目录
    // .pipe(reload({stream: true}))
    .pipe(browserSync.stream());  // broswer reload
});

gulp.task('default', ['server']);

学会了热重载,明天可以学下 sass 语法了,修改一次 ctrl+r 还真是蛋疼 ... 其实用 vue 的 webpack 模板也能搞热重载 ...

(2017.05.22 add) 有的时候,我们写个 demo 想跑一下,需求很简单,只要能启个本地服务以及支持修改刷新即可(如果只是想启个本地服务,用 python 或者 http-server 模块更简便)。我们可以在文件夹下新建三个文件,分别是 index.html(demo 页)、gulpfile.js 和 package.json,其中,gulpfile.js 内容如下:

let gulp = require('gulp');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;

gulp.task('server', function() {
  browserSync.init({
    server: {
      baseDir: './'  // 根目录,index.html 文件所在的目录
    }
  });

  // html 文件一改动,就重载页面
  gulp.watch("*.html").on('change', reload);
});

gulp.task('default', ['server']);

package.json 文件如下:

{
  "devDependencies": {
    "browser-sync": "^2.11.1",
    "gulp": "^3.9.1"
  }
}

npm i 后用 gulp 开启服务即可。

ES6 -> ES5

安装插件:

npm install  gulp-babel babel-preset-es2015 --save-dev
let gulp = require('gulp');
let babel = require('gulp-babel');

gulp.task('scripts', function() {
  gulp.src('src/js/a.js')
    .pipe(babel({  // es6 -> es5
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist/js/'))
});

gulp-plumber

默认在执行任务时,如果出错,就会挂起,要重新启动需要重新输入 gulp 命令,这时我们可以用 gulp-plumber 插件。

比如我们实时编译 sass 时:

// sass -> css
gulp.task('css', function() {  // 任务名
  // 带了 return
  return gulp.src('a.scss')  // 目标 sass 文件
    // .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(plumber({  // 编译出错时控制台打印错误,pipe 流不挂起
      errorHandler: function(error) {
        console.log(error.message);
        // 参考 http://frontendgods.com/handling-errors-when-working-with-sass-watch-plumber-and-gulp/
        this.emit("end");  // 多了这一句
      }
    }))
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest(''))  // 目标目录
    // .pipe(reload({stream: true}))
    .pipe(browserSync.stream());  // broswer reload
});

或者这样,不带 return,并且在屏幕右下角增加弹窗:

// sass -> css
gulp.task('css', function() {  // 任务名
  gulp.src('a.scss')  // 目标 sass 文件
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest(''))  // 目标目录
    // .pipe(reload({stream: true}))
    .pipe(browserSync.stream());  // broswer reload
});

最后推荐一篇写的很用心的文章 Gulp 新手入门教程(译文)

posted on 2017-01-04 22:41 子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News