Gulp 案例（三）

一、样式编译

首先调用gulp提供的api=>src来指定需要编译的文件，这里可以使用通配符的方式指定多个文件。然后在src后面可以传入一些options，大家有兴趣可以去看文档，这里就不做过多介绍了：https://www.gulpjs.com.cn/docs/api/src/。
这里我们需要编译样式文件夹中的scss文件，所以需要用到gulp-sass这个包，所以需要先安装这个包（这里注意，gulp-sass里有一个node-sass模块依赖，这个依赖需要从国外库去下载，国内网络很可能下载不下来，这里推荐大家使用cnpm安装）。
安装完成后引入进来，在pipe到打包目标目录之前调用此方法进行编译，其中sass可以设置不同样式风格的输出方法，即通过设置expanded来实现，我们这里设置的是展开输出方式更多输出方式看见https://www.cnblogs.com/jiaoshou/p/5917361.html，然后再将编译过后的内容pipe到打包目标目录就完成了。如下：

const { src, dest } = require('gulp')
const sass = require('gulp-sass')


exports.style = () => {
    return src('src/assets/styles/*.scss', {base: 'src'})
                .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
                .pipe(dest('dist'));
}

我们可以使用 gulp styles 指令去执行任务，就可以将scss文件打包成可使用的css文件，并且打包地址是dist下面的src/assets/styles文件夹中，不会改变打包路径。

二、脚本编译

接下来开始脚本编译，脚本编译需要用到gulp-babel插件，所以这里我们需要安装它，需要注意的是，安装babel的同时还需要安装它的依赖@babel/core和@babel/preset-env，@babel/preset-env主要是将最新特性进行转换。安装完成后，引入进来，步骤和编译样式文件一样。如下：

const { src, dest } = require('gulp')
const babel = require('gulp-babel')

const script = () => {
    return src('src/assets/scripts/*.js', {base: 'src'})
                .pipe(babel({presets: ['@babel/preset-env']}))
                .pipe(dest('dist'));
}

三、页面模板编译

编译模板文件时，我们需要用到gulp-swig插件，同时我们可以为模板文件添加一些数据标记，然后通过gulp-data插件将数据给他传递进去然后在编译模板时将数据给渲染到数据标记处。（注意：gulp-data插件提供的方法需要在gulp-swig之前使用才能生效）如下：

const swig = require('gulp-swig')
const data = require('gulp-data')

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

四、图片和字体文件转换

对于图片和字体文件的转换非常简单，只需要使用gulp-imagemin插件就可以对文件的大小进行压缩，如下：

const imagemin = require('gulp-imagemin')

const image = () => {
    return src('src/assets/images/**', {base: 'src'})
                .pipe(imagemin())
                .pipe(dest('dist'));
}

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

五、其他文件和文件清除以及创建组合任务实现需求打包

对于项目中其他的一些静态文件或不需要处理的文件，我们可以直接将它输出到打包的目录中，以供项目使用。另外，在我们需要build项目前，需要将打包文件夹清空以免残留一些不需要的文件占用空间，这时候可以用到del包，它不是gulp插件，但是gulp支持这个包中的方法。然后我们需要为打包任务添加组合方法，以方便操作。如下：

const del = require('del')

// 清除目标目录dist中的文件
const clean = () => {
    return del(['dist']);
}
// 其他文件处理
const extra = () => {
    return src('public/**', {base: 'public'})
                .pipe(dest('dist'));
}
// 组合任务
const compile = parallel(style, script, page, image, font);
const build = series(clean, parallel(compile, extra));

到这里，我们这个项目的初始打包代码就差不多写完了，当然很多地方还需要优化，并且需要配置开发服务器便于我们开发使用，后续会补充上这些功能。目前大致代码如下：

const { src, dest, parallel, series } = require('gulp')

const del = require('del')

const sass = require('gulp-sass')
const babel = require('gulp-babel')
const swig = require('gulp-swig')
const data = require('gulp-data')
const imagemin = require('gulp-imagemin')


const dataJson = () => {
    return require('./src/res/static/dataJson.json');
}

const clean = () => {
    return del(['dist']);
}

const style = () => {
    return src('src/assets/styles/*.scss', {base: 'src'})
                .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
                .pipe(dest('dist'));
}

const script = () => {
    return src('src/assets/scripts/*.js', {base: 'src'})
                .pipe(babel({presets: ['@babel/preset-env']}))
                .pipe(dest('dist'));
}

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

const image = () => {
    return src('src/assets/images/**', {base: 'src'})
                .pipe(imagemin())
                .pipe(dest('dist'));
}

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

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

const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
    compile,
    build
}