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

---

1. 首先 npm init 创建一个 package.json
2. 在 package.json 里面添加一个配置项中添加 bin

“bin”: {
“pages-boilerplate”: “cli.js”
},

3. 在根目录下创建一个cli.js文件，里面写下面的内容，顶格写注释(必写)

#!/usr/bin/env node
console.log(‘cli working!’)

4. 在当前目录中运行npm link，会自动创建一个package-lock.json文件

花括号里的name，是启动命令，可以换

6. 当前目录运行node-cli

node-cli
cli working!

8. 这样入口文件就搭建完毕了~
9. 安装两个npm模块

用于命令行交互
npm install inquirer
用于模板引擎渲染
npm install ejs

10. 编写 cli.js

#! /usr/bin/env node 

// console.log('toy cli 入口文件');
const inquirer = require('inquirer')
const path = require('path')
const fs = require('fs')
const ejs = require('ejs')

// 命令行询问配置项
const {
    
    selectConfig} = require('./select.config') 

inquirer.prompt(selectConfig).then(answer => {
    
    
    const tmpl = path.join(process.cwd(),'template');
    const dist = process.cwd()
   
    fs.readdir(tmpl,(err,files)=>{
    
    
        if(err) throw err;
        files.forEach(file=>{
    
    
            // console.log(path.join(tmpl,file));
            ejs.renderFile(path.join(tmpl,file),answer,(renderErr,res)=>{
    
    
                if(renderErr) throw renderErr;
                let sonDir = path.join(dist,'dist')
                fs.mkdir(sonDir, {
    
    recursive: true}, (err) => {
    
    
                    if (err) throw err;
                    fs.writeFileSync(path.join(sonDir,file), res);
                });
            })
        })
    })
})

11. 创建另一个文件夹，使用命令行

node-cli
? Project name? myProject
可以看到在新的项目中，生成了两个文件 index.html style.css

13. 下面使用 Gulp 构建

主要任务：
gulp-sass 编译scss文件
gulp-babel 编译JS
gulp-imagemin 处理图片、 字体
拷贝静态资源
gulp-swig 处理HTML模板文件
browser-sync 搭建开发服务器
监听文件改变
gulp-useref gulp-if文件引用处理
gulp-load-plugins 自动加载插件
组合任务：
develop 用于开发环境
build 用于生产

// 实现这个项目的构建任务
const {
    
     src, dest, watch, series, parallel } = require('gulp')
const del = require('del')

// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const imagemin = require('gulp-imagemin')
// const swig = require('gulp-swig')
// const ifg = require('gulp-ifg')
// const useref = require('gulp-useref')
// const uglify = require('gulp-uglify')
// const cleanCss = require('gulp-load-plugins')

const glupLoadPulgins = require('gulp-load-plugins')
const plugins = glupLoadPulgins()

// 创建开发服务器
const browserSync = require('browser-sync')
const bs = browserSync.create()

const data = {
    
    
    pkg: require('./package.json')
}

// 编译sass
const style = () => {
    
    
    return src('src/assets/styles/*.scss', {
    
     base: 'dist' })
        .pipe(sass({
    
     'src/assets/styles/*.scss' }))
        .pipe(dest('temp'))
}
// js
const script = () => {
    
    
    return src('src/assets/scripts/*.js', {
    
     base: 'dist' })
        .pipe(plugins.babel({
    
     presets: [@bable/preset-evn] }))
        .pipe(dest('temp'))
}
// 处理HTML文件
const html = () => {
    
    
    return src(['src/*.html', {
    
     base: 'dist' })
        .pipe(plugins.swig({
    
     data: {
    
     pkg: data } }))
        .pipe(dest('temp'))
}
// 处理图片
const img = () => {
    
    
    return src('src/assets/images/**')
        .pipe(plugins.imagemin()) 
        .pipe(dest('dist/img'))
}
// 处理文字
const font = () => {
    
    
    return font = () => {
    
    
        return src('src/assets/fonts/**')
            .pipe(plugins.imagemin())
            .pipe(dest('dist/font'))
    }
}
// 拷贝静态资源
const extra = () => {
    
    
    return src('public/**')
        .pipe(dest('dist/public'))
}

// 清除构建后的目录
const clean = () => {
    
    
    return del(['dist'])
}

const serve = () => {
    
    
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', html)
    // watch('src/assets/fonts/**', font)
    // watch('src/assets/images/**', img)
    // watch('public/**', extra)
    watch([
        'src/assets/fonts/**',
        'src/assets/images/**',
        'public/**'
    ], bs.reload)

    bs.init({
    
    
        notify: false,
        files: 'dist/**',
        server: {
    
    
            baseDir: ['dist', 'src', 'public'],
            routes: {
    
    
                './node_modules': 'node_modules'
            }
        }
    })
}

// 文件引用处理
const useref = ()=>{
    
    
    return src('temp/*.html', {
    
     base: 'dist' })
        .pipe(plugins.useref({
    
    searchPath:['dist','.']}))
        .pipe(plugins.if(/\.js$/,plugins.uglify()))
        .pipe(plugins.if(/\.html$/,plugins.htmlmin({
    
    
            collapseWhitespace:true,
            minifyCSS:true,
            minifyJS:true
        })))
        .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
        .pipe(dest('dist'))
}

// develop 用于开发环境
// build 用于生产环境

const compile = parallel(style, script, html)
const build =  series(clean, parallel(series(compile, useref), img, font, ,extra))
const develop = series(compile, serve)

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

个人笔记吧，有点草率，不喜勿喷哦！