前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass、less)、压缩合并(JS、CSS)、测试;图片的压缩;已经添加 JS 和 CSS 版本号,防止浏览器缓存。

1. 安装

全局安装

$ npm install gulp -g

进入项目跟目录,初始化 npm init , 然后安装:

$ npm install gulp

安装插件

  • sass的编译(gulp-ruby-sass)
  • 自动添加css前缀(gulp-autoprefixer)
  • 压缩css(gulp-clean-css)
  • 压缩js代码(gulp-uglify)
  • 压缩图片(gulp-imagemin)
  • 合并文件(gulp-concat)
  • 图片缓存插件(gulp-cache)
  • 编译提醒(gulp-notify)
  • 清除文件(del)
  • 自动添加版本号(gulp-rev-collector 、 gulp-rev)
  • ES6 转 ES5 (gulp-babel、babel-preset-es2015、babel-core)

注意,避免 gulp-babel 编译时出现Cannot find module '@babel/core', gulp-babel 的版本建议安装7.0.1 ($ npm install gulp-babel@7 --save-dev)

2. 配置项目

"dependencies": {
"babel-core": "^6.26.3",
"del": "^4.1.1",
"gulp": "^4.0.1",
"gulp-autoprefixer": "^6.1.0",
"gulp-cache": "^1.1.1",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^5.0.3",
"gulp-jshint": "^2.1.0",
"gulp-notify": "^3.2.0",
"gulp-rename": "^1.4.0",
"gulp-rev": "^9.0.0",
"gulp-rev-append": "^0.1.8",
"gulp-rev-collector": "^1.3.1",
"gulp-ruby-sass": "^4.0.0",
"gulp-uglify": "^3.0.2",
"jshint": "^2.10.2"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"gulp-babel": "^7.0.1"
}

注意各个插件的版本号,升级后可能报错

3. 引入插件

创建文件 gulpfile.js:

var gulp = require('gulp'),
babel = require('gulp-babel'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
cleanCSS = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
del = require('del');

4. 合并、压缩css, 并添加不同浏览器的前缀

gulp.task('css', function () {
// 找到 src/css/ 下的所有 css 文件
return gulp.src('src/css/**/*.css')
// 添加前缀(如:-webkit-)
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
// 合并为一个css
.pipe(concat('main.css'))
// 合并后的css 保存到 dist/css 下
.pipe(gulp.dest('dist/css'))
// 重命名
.pipe(rename({ suffix: '.min' }))
// 压缩css
.pipe(cleanCSS())
.pipe(rev())
.pipe(gulp.dest('dist/css'))
//CSS 生成文件 hash 编码并生成 rev-manifest.json 文件,里面定义了文件名对照映射
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
.pipe(notify({ message: 'css 文件压缩完成' }));
});

执行 $ gulp css 后,会在 dist 目录下 生成两个文件:main.css 和 main-e25b0dac62.min.css(其中e25b0dac62是一个随机的版本号)。

另外,还会生成了一个文件 rev/css/rev-manifest.json, 里面定义了css对应的版本号映射:

{
"main.min.css": "main-e25b0dac62.min.css"
}

5. js 代码合并和压缩

gulp.task('js', function () {
return gulp.src('src/js/**/*.js')
// 编译es6
.pipe(babel())
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(rev())
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
.pipe(notify({ message: 'js 文件编译完成' }));
});

5.1 注意:如果需要制定js的压缩先后顺序,可以在src中通过数组的形式按先后顺序写入:

gulp.src(['src/js/b.js','src/js/dashboard.js','src/js/common.js','src/js/a.js',])

5.2 编译es6

需要在根目录创建一个 .babelrc 文件:

{
"presets": ["es2015"]
}

6. 压缩图片

gulp.task('images', function () {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: '图片压缩完成' }));
});

7. Html中替换成包含版本号的css、js文件

其中: gulp.src()的第一个参数:生成的json文件的路径,这里将所有的js和css对应的json文件都选中;第二个参数:要替换css,js文件(路径)的HTML文件

gulp.task('html', function () {

    return gulp.src(['rev/**/*.json', 'src/**/*.html'])
.pipe(revCollector({
replaceReved: true, // 设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false
}))
.pipe(gulp.dest('dist'));
});

8. 清空目标文件

建议在每次任务执行前,先清除之前生成的文件:

gulp.task('clean', done => {
del(['dist/css', 'dist/js', 'dist/html', 'dist/images'])
console.log('----------------清空文件-------------------')
done()
});

9. 设置默认任务(default)

默认任务指定执行上面写好的三个任务:

gulp.task('default', gulp.series('clean', gulp.parallel('css', 'js', 'images'), 'html', done => {
console.log('-----------全部执行完毕------------------')
done();
}));

运行:

$ gulp

默认的名为 default 的任务(task)将会被运行。

执行完成后,会在 dist 目录下出现所有执行后的 js、css、html、images。

注意gulp 执行顺序:

  • gulp.series 用于串行(顺序)执行
  • gulp.parallel 用于并行执行

项目初始目录:

前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

编译后目录:

前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

gulpfile.js 代码:

var gulp = require('gulp'),
babel = require('gulp-babel'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
cleanCSS = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
del = require('del'); // 文件路径
var paths = {
css: {
src: 'src/css/**/*.css',
dest: 'dist/css/',
rev: 'rev/css/'
},
js: {
src: ['src/js/a.js','src/js/common.js','src/js/dashboard.js','src/js/b.js',],
dest: 'dist/js/',
rev: 'rev/js/'
},
images: {
src: 'src/images/**/*',
dest: 'dist/images/'
}
}; // 合并 压缩 css, 自动添加不同浏览器的前缀
gulp.task('css', function () {
// 找到 src/css/ 下的所有 css 文件
return gulp.src(paths.css.src)
// 添加前缀(如:-webkit-)
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
// 合并为一个css
.pipe(concat('main.css'))
// 合并后的css 保存到 dist/css 下
.pipe(gulp.dest(paths.css.dest))
// 重命名
.pipe(rename({ suffix: '.min' }))
// 压缩css
.pipe(cleanCSS())
.pipe(rev())
.pipe(gulp.dest(paths.css.dest))
//CSS 生成文件 hash 编码并生成 rev-manifest.json 文件,里面定义了文件名对照映射
.pipe(rev.manifest())
.pipe(gulp.dest(paths.css.rev))
.pipe(notify({ message: 'css 文件压缩完成' }));
}); // js 代码合并和压缩
gulp.task('js', function () {
return gulp.src(paths.js.src)
.pipe(babel())
.pipe(concat('main.js'))
.pipe(gulp.dest(paths.js.dest))
.pipe(rename({ suffix: '.min' }))
.pipe(rev())
.pipe(uglify())
.pipe(gulp.dest(paths.js.dest))
.pipe(rev.manifest())
.pipe(gulp.dest(paths.js.rev))
.pipe(notify({ message: 'js 文件编译完成' }));
}); // 压缩图片
gulp.task('images', function () {
return gulp.src(paths.images.src)
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(paths.images.dest))
.pipe(notify({ message: '图片压缩完成' }));
}); //Html替换css、js文件版本
gulp.task('html', function () {
return gulp.src(['rev/**/*.json', 'src/**/*.html'])
.pipe(revCollector({
replaceReved: true,
}))
.pipe(gulp.dest('dist'));
}); // 清空目标文件
// 在任务执行前,先清除之前生成的文件:
gulp.task('clean', done => {
del(['dist/css', 'dist/js', 'dist/html', 'dist/images'])
console.log('----------------清空文件-------------------')
done()
}); // 设置默认任务(default)
gulp.task('default', gulp.series('clean', gulp.parallel('css', 'js', 'images'), 'html', done => {
console.log('-----------全部执行完毕------------------')
done();
}));

index.html 编译前

src/html/index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/main.min.css">
</head>
<body>
<div id="main">
<div class="box">
<div class="item">
<h3>
上一篇:【2017集美大学1412软工实践_助教博客】团队作业8——第二次项目冲刺(Beta阶段)


下一篇:前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上