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

2023-08-11 18:57:10

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 用于并行执行

项目初始目录：

编译后目录：

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>

码农公寓