时间戳

首页 > 技术文章 > 一个gulp用于开发与生产的示例

一个gulp用于开发与生产的示例

gymmer 2017-05-22 13:42 原文

gulp是一款流行的前端构建工具，可以帮我们完成许多工作：监听文件修改、刷新浏览器、编译Less/Scss、压缩代码、添加md5、合并文件等。gulp的配置和使用特别简单，学习gulp过程中顺便写了一个小示例。

可以在GitHub上下载该示例：https://github.com/gymmer/gulp-example

准备工作

  1. gulp是基于Node.js的。因此需先安装Node。
  2. 接下来使用npm安装gulp：sudo npm install -g gulp。-g表示安装到全局环境，可以在任何项目中使用gulp。
  3. 进入到项目所在目录。
  4. 如果项目没有基于npm，则使用npm init创建package.json。
  5. 在项目中安装gulp：npm install --save-dev gulp。--save-dev表示安装的同时更新package.json中的依赖。

项目结构

示例采用了如下的项目结构：

.
├── README.md       // git的README文件
├── dist            // 生产环境目录。通过gulp构建自动生成
├── gulpfile.js     // gulp的配置文件
├── node_modules    // node必备
├── package.json    // node必备
└── src             // 开发环境目录。存放项目的源代码
    ├── css             // 样式目录。保存CSS文件和字体文件
    │   ├── compile         // CSS文件目录。保存less/sass编译后生成的CSS文件
    │   ├── fonts           // 字体文件目录。保存Font Awesome或其他字体文件
    │   ├── lib             // CSS文件目录。保存引用的第三方CSS文件，如Bootstrap
    │   └── user            // CSS文件目录。保存用户自定义的CSS文件
    ├── img             // 图片目录。保存图片文件
    ├── index.html      // 项目的HTML入口文件
    ├── js              // 脚本目录。保存JavaScript文件
    │   ├── lib             // JS文件目录。保存引用的第三方JS文件，如jQuery
    │   └── user            // JS文件目录。保存用户自定义的JS文件
    ├── less            // Less文件目录
    └── sass            // Sass文件目录

示例中，CSS和JS将第三方库和用户自定义文件分开存放，虽然为gulp的配置带来稍许难度，但是更有利于项目的逻辑结构。

插件一览

gulp生态圈有很多成熟的插件，示例中用到的有：

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-cache": "^0.4.6",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.3.1",
    "gulp-compass": "^2.1.0",
    "gulp-connect": "^5.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-jshint": "^2.0.4",
    "gulp-less": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.1.2",
    "jshint": "^2.9.4"
  }

配置一览

gulp的配置依赖于文件gulpfile.js。这是示例配置文件一览，接下来将介绍每个插件：

'use strict';

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

// JS代码校验。只校验用户自定义的js文件，不校验第三方js文件，如jQuery
gulp.task('jslint', function() {
    return gulp.src('src/js/user/**/*.js')
        .pipe(plugins.jshint())
        .pipe(plugins.jshint.reporter());
});

// 监听所有文件改动：自动刷新
gulp.task('reload', function() {
    return gulp.src('src/**/*')
        .pipe(plugins.connect.reload());
});

// 编译less文件，并监听less文件改动：重新编译+自动刷新
gulp.task('less', function() {
    return gulp.src('src/less/**/*.less')
        .pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')})) // 防止less出错，自动退出watch
        .pipe(plugins.less())
        .pipe(gulp.dest('src/css/compile'))
        .pipe(plugins.connect.reload());
});

// 编译sass文件，并监听sass文件改动：重新编译+自动刷新
gulp.task('sass', function() {
    return gulp.src('src/sass/**/*.{sass,scss}')
        .pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')})) // 防止sass出错，自动退出watch
        // (1) 如果只使用 sass, 请使用sass插件:
        // .pipe(plugins.sass({
        //  outputStyle: 'expanded'  // 可选：nested  (默认)  |  expanded  |  compact  |  compressed
        // }))
        // (2) 如果使用 compass, 请使用compass插件:
        .pipe(plugins.compass({
            css: 'src/css/compile',
            sass: 'src/sass',
            image: 'src/img',
            style: 'expanded' // 可选：nested  (默认)  |  expanded  |  compact  |  compressed
        }))
        .pipe(gulp.dest('src/css/compile'))
        .pipe(plugins.connect.reload());
});

// 监听文件改动
gulp.task('watch', function() {
    gulp.watch('src/**/*', ['reload']);
    gulp.watch('src/less/**/*.less', ['less']);
    gulp.watch('src/less/**/*.{sass,scss}', ['sass']);
});

// 运行一个服务器
gulp.task('server', function() {
    plugins.connect.server({
        root: 'src',
        port: 8080,  // Can not be 80
        livereload: true
    });
});

// 默认任务
gulp.task('default', function() {
    gulp.run('jslint', 'reload', 'less', 'sass', 'watch', 'server');
});

// build

gulp.task('clean', function() {
    return gulp.src('dist')
        .pipe(plugins.clean());
});

gulp.task('build-js', function() {
    return gulp.src('src/**/*.js')
        .pipe(plugins.uglify())                 // JS压缩
        .pipe(plugins.rev())                    // 添加MD5
        .pipe(gulp.dest('dist'))                // 保存JS文件
        .pipe(plugins.rev.manifest())           // 生成MD5映射
        .pipe(gulp.dest('dist/rev/js'));        // 保存映射
});

gulp.task('build-css', ['less', 'sass'], function() {   // 编译less/sass
    return gulp.src('src/**/*.css')
        .pipe(plugins.cleanCss())               // CSS压缩 
        .pipe(plugins.rev())                    // 添加MD5
        .pipe(gulp.dest('dist'))                // 保存CSS文件
        .pipe(plugins.rev.manifest())           // 生成MD5映射
        .pipe(gulp.dest('dist/rev/css'));       // 保存映射
});

gulp.task('build-html', ['build-js', 'build-css'], function() {     // 依赖：需先生成映射
    return gulp.src(['dist/rev/**/*.json', 'src/**/*.html'])
        .pipe(plugins.revCollector())                       // 根据映射，替换文件名
        .pipe(plugins.htmlmin({collapseWhitespace: true}))  // HTML压缩
        .pipe(gulp.dest('dist'));                           // 保存HTML文件
});

gulp.task('build-fonts', function() {
    return gulp.src('src/**/*.{eot,ttf,woff,woff2,otf}')
        .pipe(gulp.dest('dist'));
});

gulp.task('build-img', function() {
    return gulp.src('src/**/*.{png,jpg,gif,jpeg,svg}')
        .pipe(plugins.cache(plugins.imagemin({  // 图片压缩
            interlaced: true
        })))
        .pipe(gulp.dest('dist'));
});

gulp.task('build', ['clean'], function() {
    return gulp.run('build-html', 'build-fonts', 'build-img', function() {
        gulp.src('dist/rev').pipe(plugins.clean());
    });
});

配置详解

通常开发环境和生产环境对项目构建的需求是不一样的。开发环境侧重于调试代码，如监听文件修改、CSS预编译等。而生产环境侧重于项目的上线与部署，如压缩代码、压缩图片、添加md5等。为此，示例定义了两项gulp任务，以满足开发与生产的不同需求。

另外，每一个gulp插件都有丰富的功能和配置，本示例的目的不在于讲解每个插件的详细用法，而在于演示如何组合使用常用插件的基本功能，完成日常开发任务。

插件详解可移步npm官网或Github。

自动加载插件 (gulp-load-plugins)

官网：https://www.npmjs.com/package/gulp-load-plugins

安装：npm install --save-dev gulp-load-plugins

使用gulp插件的一般过程是：

  1. 使用npm安装在局部环境，并更新package.json：npm install --save-dev gulp-foo-plugin
  2. 在gulpfile.js中加载插件：var foo = require('gulp-foo-plugin')
  3. 在合适的地方使用插件：gulp.src('src/*.js').pipe(foo())

如果加载太多gulp插件，gulpfile.js文件开头会有大量require代码，导致文件冗长，并且容易遗漏：

var gulp = require('gulp');
var foo = require('gulp-foo-plugin');
var boo = require('gulp-boo-plugin');
var bar = require('gulp-bar-plugin');

gulp.task('foo', function() {
    return gulp.src('src/*.js')
        .pipe(foo())
        .pipe(gulp.dest('dist/*.js'));
});

gulp.task('boo', function() {
    return gulp.src('src/*.css')
        .pipe(boo())
        .pipe(gulp.dest('dist/*.css'));
});

gulp.task('bar', function() {
    return gulp.src('src/*.less')
        .pipe(bar())
        .pipe(gulp.dest('dist/*.less'));
});

而gulp-load-plugins可以避免这样的问题。

  1. 安装gulp-load-plugins：npm install --save-dev gulp-load-plugins
  2. 安装其他插件：npm install --save-dev gulp-foo-plugin, gulp-boo-plugin, gulp-bar-plugin
  3. 在gulpfile.js中只需加载gulp-load-plugins：var plugins = require('gulp-load-plugins')()
  4. 使用其他插件时，将其作为plugins对象的方法进行调用。如下：
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

gulp.task('foo', function() {
    return gulp.src('src/*.js')
        .pipe(plugins.fooPlugin())
        .pipe(gulp.dest('dist/*.js'));
});

gulp.task('boo', function() {
    return gulp.src('src/*.css')
        .pipe(plugins.booPlugin())
        .pipe(gulp.dest('dist/*.css'));
});

gulp.task('bar', function() {
    return gulp.src('src/*.less')
        .pipe(plugins.barPlugin())
        .pipe(gulp.dest('dist/*.less'));
});

这样，就不必写冗长的require()了！

gulp-load-plugins会自动寻找package.json中以gulp-为前缀的依赖项。所以一定记得更新package.json。

本示例将大量使用gulp-load-plugins。

开发环境

本地服务器 (gulp-connect)

官网：https://www.npmjs.com/package/gulp-connect

安装：npm install --save-dev gulp-connect

本地调试时通常需要搭建一个web服务器。我选用的是gulp-connect，配合gulp.watch()还可以实现自动刷新浏览器。

// 运行一个服务器
gulp.task('server', function() {
    plugins.connect.server({
        root: 'src',        // 根目录
        port: 8080,         // 端口号。经测试，如果设置为80会报错。
        livereload: true    // 启用livereload，刷新浏览器
    });
});

gulp-connect还可以启动多个server，并为每个server指定名称。具体看应用场景。

监听文件修改 + 自动刷新 (gulp.watch)

利用gulp-connect的livereload功能，和gulp.watch()函数，可以实现监听文件的修改，并自动刷新浏览器。

// 监听所有文件改动：自动刷新
gulp.task('reload', function() {
    return gulp.src('src/**/*')
        .pipe(plugins.connect.reload());
});

// 监听文件改动
gulp.task('watch', function() {
    gulp.watch('src/**/*', ['reload']);
    gulp.watch('src/less/**/*.less', ['less']);
    gulp.watch('src/less/**/*.{sass,scss}', ['sass']);
});

这里比较暴力，直接监听了所有文件的修改。可以根据文件类型定义具体的规则。比如，希望修改less/sass文件的同时，重新编译并刷新浏览器。那么需要在less/sass任务中，触发connect.reload()。less/sass任务在后文有详细介绍。

JS代码校验 (gulp-jshint)

官网：https://www.npmjs.com/package/gulp-jshint

安装：npm install --save-dev gulp-jshint jshint

代码校验可以使程序更健壮、更严谨，哪怕漏掉一个无关紧要的分号，都逃不过jshint的法眼。

使用比较简单。需要注意的是，在本示例的项目结构中，第三方JS文件和自定义JS文件分开存储，因此只校验了自定义的JS文件。

// JS代码校验。只校验用户自定义的js文件，不校验第三方js文件，如jQuery
gulp.task('jslint', function() {
    return gulp.src('src/js/user/**/*.js')
        .pipe(plugins.jshint())
        .pipe(plugins.jshint.reporter());
});

使用Less (gulp-less)

官网：https://www.npmjs.com/package/gulp-less

安装：npm install --save-dev gulp-less gulp-plumber gulp-notify

编译less至CSS文件。基本用法为：

gulp.task('less', function() {
    return gulp.src('src/less/**/*.less')
        .pipe(plugins.less())
        .pipe(gulp.dest('src/css/compile'));
});

虽然编译生成了CSS，但是并不能满足需求。

首先，前面介绍过，如果希望修改less文件的同时，编译less并刷新浏览器，则需要在less任务中，触发connect.reload()。

其次，当编译less时出现语法错误，会导致watch终止，而错误信息需要进入命令行中查看。于是你会发现，修改less后浏览器不会自动刷新了，查看CSS发现less没有被编译，而整个过程竟然没有主动提醒我！解决方法是gulp-plumber+gulp-notify。

完整的解决方案如下：

// 编译less文件，并监听less文件改动：重新编译+自动刷新
gulp.task('less', function() {
    return gulp.src('src/less/**/*.less')
        .pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')})) // 防止less出错，自动退出watch
        .pipe(plugins.less())
        .pipe(gulp.dest('src/css/compile'))
        .pipe(plugins.connect.reload());
});

使用Sass (gulp-sass)

官网：https://www.npmjs.com/package/gulp-sass

安装：npm install --save-dev gulp-sass gulp-plumber gulp-notify

与Less相比，几点不同是：

  • Sass有两种文件后缀名，.sass和.scss。最保险的方法是都编译一下。
  • Sass可以指定编译生成CSS的格式。有四种格式可选：nested(默认)、expanded、compact、compressed
// 编译sass文件，并监听sass文件改动：重新编译+自动刷新
gulp.task('sass', function() {
    return gulp.src('src/sass/**/*.{sass,scss}')
        .pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')}))       // 防止sass出错，自动退出watch
        .pipe(plugins.sass({
            outputStyle: 'expanded'     // CSS格式
        }))
        .pipe(gulp.dest('src/css/compile'))
        .pipe(plugins.connect.reload());
});

使用Compass (gulp-compass)

官网：https://www.npmjs.com/package/gulp-compass

准备：需安装compass：gem install compass

安装：npm install --save-dev gulp-compass gulp-plumber gulp-notify

Compass是Sass的神器。使用Compass插件的配置要稍稍复杂：

gulp.task('compass', function() {
    return gulp.src('src/sass/**/*.{sass,scss}')
        .pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')})) // 防止sass出错，自动退出watch
        .pipe(plugins.compass({
            css: 'src/css/compile',
            sass: 'src/sass',
            image: 'src/img',
            style: 'expanded'     // CSS格式
        }))
        .pipe(gulp.dest('src/css/compile'))
        .pipe(plugins.connect.reload());
});

gulp-sass和gulp-compass都是编译Sass，何必分家，搞得那么累？于是，我合并了这两个任务，应用时根据具体场景，注释掉相应代码即可。

// 编译sass文件，并监听sass文件改动：重新编译+自动刷新
gulp.task('sass', function() {
    return gulp.src('src/sass/**/*.{sass,scss}')
        .pipe(plugins.plumber({errorHandler: plugins.notify.onError('Error: <%= error.message %>')})) // 防止sass出错，自动退出watch
        // (1) 如果只使用 sass, 请使用sass插件:
        // .pipe(plugins.sass({
        //  outputStyle: 'expanded'
        // }))
        // (2) 如果使用 compass, 请使用compass插件:
        .pipe(plugins.compass({
            css: 'src/css/compile',
            sass: 'src/sass',
            image: 'src/img',
            style: 'expanded' 
        }))
        .pipe(gulp.dest('src/css/compile'))
        .pipe(plugins.connect.reload());
});

任务组合

这么多小任务，是时候组合一下了。考虑到最常使用的是开发环境，而生产环境只是在上线迭代时才接触。因此，示例将defalut任务分配给开发环境。

// 默认任务
gulp.task('default', function() {
    gulp.run('jslint', 'reload', 'less', 'sass', 'watch', 'server');
});

生产环境

清空构建目录 (gulp-clean)

官网：https://www.npmjs.com/package/gulp-clean

安装：npm install --save-dev gulp-clean

每次构建目录，如果希望清理上次构建的文件，可以使用gulp-clean插件，免去了手动删除的操作。

gulp.task('clean', function() {
    return gulp.src('dist')
        .pipe(plugins.clean());
});

压缩JS (gulp-uglify)

官网：https://www.npmjs.com/package/gulp-uglify

安装：npm install --save-dev gulp-uglify

方法：

gulp.task('minify-js', function() {
    return gulp.src('src/**/*.js')
        .pipe(plugins.uglify())                 // JS压缩
        .pipe(gulp.dest('dist'));               // 保存JS文件
});

压缩CSS (gulp-clean-css)

官网：https://www.npmjs.com/package/gulp-clean-css

安装：npm install --save-dev gulp-clean-css

方法：

gulp.task('minify-css', ['less', 'sass'], function() {    // 编译less/sass
    return gulp.src('src/**/*.css')
        .pipe(plugins.cleanCss())               // CSS压缩 
        .pipe(gulp.dest('dist'));               // 保存CSS文件
});

需要注意的是，本示例在压缩CSS之前，进行了一次Less/Sass编译，防止CSS文件丢失。

有的教程会提到使用gulp-minify-css，不过npm官网已不推荐gulp-minify-css：

This package has been deprecated. Please use gulp-clean-css instead.

压缩HTML (gulp-htmlmin)

官网：https://www.npmjs.com/package/gulp-htmlmin

安装：npm install --save-dev gulp-htmlmin

方法：

gulp.task('minify-html', function() {
    return gulp.src('src/**/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))  // HTML压缩
        .pipe(gulp.dest('dist'));                   // 保存HTML文件
});

有的教程会提到使用gulp-minify-html，不过npm官网已不推荐gulp-minify-html：

This package has been deprecated in favor of gulp-htmlmin, which should be faster and more comprehensive.

压缩图片 (gulp-imagemin)

官网：https://www.npmjs.com/package/gulp-imagemin

安装：npm install --save-dev gulp-imagemin gulp-cache

方法：

gulp.task('build-img', function() {
    return gulp.src('src/**/*.{png,jpg,gif,jpeg,svg}')
        .pipe(plugins.cache(plugins.imagemin({  // 图片压缩
            interlaced: true
        })))
        .pipe(gulp.dest('dist'));
});

添加MD5 (gulp-rev)

官网：https://www.npmjs.com/package/gulp-rev

安装：npm install --save-dev gulp-rev

项目上线时 ，通常会为静态资源文件添加一个“后缀”，用来解决缓存更新问题。常用的后缀有时间戳、版本号、文件MD5值。本示例采用MD5值。

gulp-rev插件会根据原文件生成一个新文件，其文件名会自动追加MD5。原文件与新文件的映射关系也需要保留下来，路径替换时会用到映射关系。

方法：

gulp.task('MD5', function() { 
    return gulp.src('src/*.css')
        .pipe(plugins.rev())            // 添加MD5
        .pipe(gulp.dest('dist'))
        .pipe(plugins.rev.manifest())   // 生成MD5映射
        .pipe(gulp.dest('./rev'));      // 保存映射
});

将压缩JS、压缩CSS和添加MD5这三项任务组合起来，便有了：

gulp.task('build-js', function() {
    return gulp.src('src/**/*.js')
        .pipe(plugins.uglify())                 // JS压缩
        .pipe(plugins.rev())                    // 添加MD5
        .pipe(gulp.dest('dist'))                // 保存JS文件
        .pipe(plugins.rev.manifest())           // 生成MD5映射
        .pipe(gulp.dest('dist/rev/js'));        // 保存映射
});

gulp.task('build-css', ['less', 'sass'], function() {    // 编译less/sass
    return gulp.src('src/**/*.css')
        .pipe(plugins.cleanCss())              // CSS压缩 
        .pipe(plugins.rev())                    // 添加MD5
        .pipe(gulp.dest('dist'))                // 保存CSS文件
        .pipe(plugins.rev.manifest())           // 生成MD5映射
        .pipe(gulp.dest('dist/rev/css'));       // 保存映射
});

路径替换 (gulp-rev-collector)

官网：https://www.npmjs.com/package/gulp-rev-collector

安装：npm install --save-dev gulp-rev-collector

添加MD5会导致静态资源文件名的更改。因此HTML文件中需要对路径做替换，才能保证正确的引用关系。

需要注意的是，路径替换的依据是gulp-rev插件生成的映射关系文件，因此它依赖build-js和build-css任务。

gulp.task('build-html', ['build-js', 'build-css'], function() {
    return gulp.src(['dist/rev/**/*.json', 'src/**/*.html'])
        .pipe(plugins.revCollector())               // 根据映射，替换文件名
        .pipe(htmlmin({collapseWhitespace: true}))  // HTML压缩
        .pipe(gulp.dest('dist'));                   // 保存HTML文件
});

拷贝其他文件

项目中有一些文件在整个周期中不会被修改，上线发布时也无需任何处理，如字体文件。那么，直接将这类文件复制到构建目录即可。

gulp.task('build-fonts', function() {
    return gulp.src('src/**/*.{eot,ttf,woff,woff2,otf}')
        .pipe(gulp.dest('dist'));
});

任务组合

生产环境的配置已大致完成。将上述任务组合：

gulp.task('build', ['clean'], function() {
    return gulp.run('build-html', 'build-fonts', 'build-img');
});

清空rev

添加MD5任务中生成的映射文件，在完成路径替换后就结束了自己的使命。可以将其删除，使构建目录更加清爽。方法是，在build任务中增加回调参数，使用gulp-clean插件清空映射文件目录。

gulp.task('build', ['clean'], function() {
    return gulp.run('build-html', 'build-fonts', 'build-img', function() {
        gulp.src('dist/rev').pipe(plugins.clean());
    });
});

其他

.gitignore

如果使用git做版本控制，有一些目录是不需要提交的，可以用.gitignore文件指定。例如：

/node_modules
/dist
/.sass-cache
.DS_Store

其他功能推荐

  • sourcemap：gulp-sourcemaps
  • 合并文件：gulp-concat
  • 重命名文件：gulp-rename

参考

前端构建工具gulp入门教程

前端构建工具gulpjs的使用介绍及技巧

gulp教程之gulp-less

Gulp学习指南之CSS合并、压缩与MD5命名及路径替换

JavaScript Source Map 详解

推荐阅读