前端自动化构建工具（四） ------ gulp案例

前言：在上一篇章，已经介绍过了gulp的基本使用和gulp 核心的工作思想，和一些基本的文件API，那么我们就以实际为例，创建一个gulpfile.js文件，开启一个真正的构建打包项目吧！ let’s go !!!

一、gulp案例 -----样式编译

const {src ,dest} = require ('gulp')
const sass = require('gulp-sass') //yarn add gulp-sass --dev
const style = ()=>{
    return src('src/assets/styles/*.scss',{base:"src"}) //base:可以让生成的目录与读取文件的目录一致
    .pipe(sass())   //文件处理，转化为css 文件，注意gulp-sass不能处理以—_下滑线开头的sass文件名，默认是连接文件。
    .pipe(dest("temp")) 
}
module.exports = {
    style
}

二、gulp案例 -----脚本即es6编译

const babel = require('gulp-babel') //yarn add gulp-babel @babel/core @babel/preset-env --dev
const script = () =>{
    return src('src/assets/scripts/*.js',{base:'src'})
    .pipe(babel({presets:['@babel/preset-env']}))
    .pipe(dest('temp'))
}

三、gulp案例 -----页面模版编译

const swig = require('gulp-swig') //yarn add gulp-swig --dev
const page = () =>{
    return src('src/*.html',{base:'src'})
    .pipe(swig(data))
    .pipe(dest('temp'))
}

写到这里呢，可以给这几个任务建立一个并行的任务，使用gulp提供的 parallel

const compile = parallel(style,script,page)
module.exports = {
    compile
}

四、gulp案例 -----页面模版编译

const imagemin = require('gulp-imagemin') // yarn add gulp-imagemin --dev
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 del = require('del')
const clean = ()=>{
    return del(['dist'，'temp'])
}
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
}

六、自动加载全部插件

const  loadPlugins = require('gulp-load-plugins')
const plugins  = loadPlugins()
在 const sass = require('gulp-sass')   中右键 sass 代码，选中重命名符号，plugins.sass  那么下面的关于引用sass的地方，就都改变了，再把const sass = require('gulp-sass')  这行代码删掉，就会自动加载相关插件了。

七、开发服务器和热更新

const browserSync = require('browser-sync')
const bs = browserSync.create()
const serve = () =>{
    bs.init({
        notify:false,  //页面是否连接提示关闭
        files:'temp/**', //监听哪些文件一旦发生变动，就实现热更新
        port:2080,    //设定端口号
        server:{
            baseDir:'temp',     //文件根目录
            routes :{
                '/node_modules' : 'node_modules' //指定目录，优先级高于basedir
            }
        }
    })
}

八、监视源代码变化和构建优化

const {watch} = require ('gulp')
const serve = () =>{
    watch('src/assets/styles/*.scss',style)
    watch('src/assets/scripts/*.js',script)
    watch('src/*.html',page)
    // watch('src/assets/images/**',image)  在开发构建的时候，不需要进行文字和图片和一些其他构建，因为也只是简单的进行无损压缩，反倒增加构建的复杂。可直接请求原来的文件。
    // watch('src/assets/fonts/**',font)
    // watch('public/**',extra)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ],bs.reload)
    bs.init({
        notify:false,
        files:'temp/**',
        port:2080,
        server:{
            baseDir:['dist','src','pu'],     
            routes :{
                '/node_modules' : 'node_modules'
            }
        }
    })
}

const compile = parallel(style,script,page)
const build = series(clean,  parallel(compile,extra,image,font))
const develop = series(compile,serve)
module.exports = {
    compile,
    build,
    serve,
    clean,
    develop
}

九、useref 文件引入处理及压缩

在生产环境中，html依赖的样式文件，原有的路径找不到，需要通过useref 来找到。

//yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
//yarn add gulp-if --dev
const useref = () =>{
    return src('temp/*.html',{base:'temp'})
    .pipe(plugins.useref({searchPath:['temp','.']}))
    // 压缩相关js,css,html
    .pipe(plugins.if(/\.js$/,plugins.uglify()))
    .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/,plugins.htmlmin({
        collapseWhitespace:true,
        minifyCss :true,
        minifJs:true 
    })))
    .pipe(dest('dist'))
}

十、补充

正常来说不需要暴露所有的命令给外部，只需暴露这几个

module.exports = {
    build,
    clean,
    develop,
}

为了方便其他用户，可以把命令写在scripte中

"scripts": {
    "clean": "gulp clean",
    "build": "gulp build",
    "develop": "gulp develop"
  },
直接运行 yarn clean 等即可

最后记得在.gitignore 添加 dist, temp 文件

dist
temp

一个完成的打包构建就完成好啦！！1！