使用 Gulp 完成项目的自动化构建

思路

对项目进行分析，需要对HTML、SCSS、JS进行构建并压缩，对图片字体文件进行压缩

1. 安装gulp，作为开发依赖

yarn add gulp --dev

2. 将 scss 文件通过gulp-sass插件转换成css文件

npm install sass gulp-sass --save-dev

3. 通过module.exports暴露接口

module.exports = {
    xxx //此处需要写声明的gulp-sass的实例对象
}

4. 将js 文件中 es6 新特性通过gulp-babel、@babel/core、@babel/preset-env插件进行转换

yarn add gulp-babel --dev

执行上面命令加载gulp-babel后，执行程序报错
Cannot find module ‘@babel/core’
需要安装@babel/core @babel/preset-env

yarn add @babel/core @babel/preset-env --dev

5. 将html文件通过gulp-swig插件进行转换

yarn add gulp-swig --dev

6. 将图片、字体文件通过gulp-imagemin插件进行转换

yarn add gulp-imagemin --dev

7. 将其他类型的文件进行压缩
8. 安装del依赖包，支持文件清除功能

yarn add del --dev

9. 通过gulp-load-plugins 自动加载插件

yarn add gulp-load-plugins --dev

10. 通过browser-sync插件安装开发服务器，在浏览器上进行页面查看

yarn add browser-sync --dev

11. 通过 gulp-useref插件进行压缩
12. 解决 useref 读写冲突写入新的目录内
13. 重新规划目录结构

代码

gulpfile.js代码如下：

// 其他文件清除的依赖包(yarn add del --dev)
const del = require('del')

// 自动加载插件(yarn add gulp-load-plugins --dev)
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()

// yarn add gulp --dev
const { src, dest, series, parallel, watch, htmlmin, uglify, cleanCsscls } = require('gulp')

/* 使用loadPlugins插件后，下面的依赖包就不需要声明了。采用plusgins.sass的方式调用
// yarn add gulp-babel --dev 会报错，提示Cannot find module '@babel/core'。需要执行下面命令
// yarn add @babel/core @babel/preset-env --dev
const babel = require('gulp-babel')
// yarn add gulp-swig --dev
const swig = require('gulp-swig')
// yarn add gulp-imagemin --dev
const imagemin = require('gulp-imagemin') 
*/

// sass插件比较特殊
// npm install sass gulp-sass --save-dev
const sass = require( 'gulp-sass' )( require ( 'sass' ) );

// 安装开发服务器(yarn add browser-sync --dev)，不是gulp插件，只是通过gulp去管理
const browserSync = require('browser-sync')
// 会创建一个开发服务器
const bs = browserSync.create()


const data = {
    menus : [
        {
            name: 'Home',
            icon: 'aperture',
            link: 'index.html'
        },
        {
            name : 'About',
            link : 'about.html'
        }
    ],
    pkg : require('./package.json'),
    date : new Date()
}

// 删除指定文件，promise方法
const clean = () => {
    return del(['dist', 'temp'])
}

const style = () => {
    return src('src/assets/styles/*.scss', {base : 'src'})    
    // 转换 以“_”开头的scss文件，不会被转换,例如此处的_icons.scss,_variables.scss
    // sass 中的outputStyle可以指定转换文件中的样式：compact,compressed,expanded,nested
    .pipe(sass({ outputStyle : 'expanded' }))
    // 转换的文件指定到'dist'目录下
    .pipe(dest('temp'))
    //如果不在bs.init中配置files，可以使用下面这种方式进行页面刷新
    //.pipe(bs.reload({stream : true}))
}

const script = () => {
    return src('src/assets/scripts/*.js', {base : 'src'})
        // 如果忘记传参{presets : ['@babel/preset-env']}，转换就没有效果
        // babel只是一个转换平台，具体转换的其实是preset插件集合
        .pipe(plugins.babel({presets : ['@babel/preset-env']}))
        .pipe(dest('temp'))
}

const page = () => {
    return src('src/*.html', {base : 'src'})
        .pipe(plugins.swig({ data }))
        .pipe(dest('temp'))
}

// 此处运行image命令报错，将imagemin版本降到7即可解决
const image = () => {
    return src('src/assets/image/**', {base : 'src'})
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const font = () => {
    return src('src/assets/fonts/**', {base : 'src'})
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

const extra = () => {
    return src('public/**', {base : 'public'})
        .pipe(dest('dist'))
}

const server = () => {
    // 监听
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    // 下面三个资源不需要在开发阶段加载
    // watch('src/assets/image/**', Image)
    // watch('src/assets/fonts/**', font)
    // watch('public/**', extra)
    watch([
        'src/assets/image/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)

    bs.init({
        // 配置
        server : {
            notify : 'false',
            port : 2080,
            files : 'dist/**',
            // open : false
            // web服务器的根目录
            baseDir: ['temp', 'src', 'public'],
            // 特殊路由，优先于baseDir的配置
            routes : {
                '/node_modules' : 'node_modules'
            }
        }
    })
}

// 将引用文件指定到统一文件中
// yarn add gulp-useref --dev
const useref = () => {
    return src('temp/*.html', {base : 'temp'})
        .pipe(plugins.useref({searchPath : ['temp', '.']}))
        // yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
        // yarn add gulp-if --dev
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
            collapseWhitesp : true,
            minifyCSS : true,
            minifyJS : true
        })))
        // 指定写入路径
        .pipe(dest('dist'))
}

const compile = parallel(style, script, page)

// 上线之前执行的任务
const build = series(clean, parallel(series(compile, useref), image, font, extra))

const develop = series(build, server)

// 导出
module.exports = {
    clean,
    develop,
    build
}

踩坑

1. 使用命令yarn add gulp-sass --dev安装gulp-sass插件后，对css文件进行处理，报错。
   原因：不支持node-sass。需要换一种方法安装

npm install sass gulp-sass --save-dev

且在gulpfile.js文件中声明方法需要改变：

const sass = require( 'gulp-sass' )( require ( 'sass' ) );

2. 安装插件gulp-imagemin后，对图片文件进行处理，结果报错。考虑版本兼容问题。此处我安装的是版本8，将版本降低为7后，问题解决
3. 另外就是由于自己的粗心大意导致的问题。执行useref后，报错：

Error: gulp-if: child action is required

原因是

此处的括号问题