gulp 记录

TODO

• typescript 编写gulpfile
• gulpfile分割
• eslint
• sourcemaps

eslint https://www.cnblogs.com/jiaoshou/p/12209597.html

sourcemaps https://www.cnblogs.com/jiaoshou/p/12209597.html

安装

# 安装
npm install --save-dev gulp
# 查看版本
F:\code\gulp-study>npx gulp --version
CLI version: 2.3.0
Local version: 4.0.2

F:\code\gulp-study>

文档

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

hello world

错误版

基本的hello world如下所示

const gulp = require('gulp')

gulp.task('hello', () => {
    console.log('hello world')
})

执行结果如下

F:\code\gulp-study>npx gulp hello
[07:25:46] Using gulpfile F:\code\gulp-study\gulpfile.js
[07:25:46] Starting 'hello'...
hello world
[07:25:46] The following tasks did not complete: hello
[07:25:46] Did you forget to signal async completion?

F:\code\gulp-study>

正确版

解决办法如下

参考 https://www.gulpjs.com.cn/docs/getting-started/async-completion/

const gulp = require('gulp')

gulp.task('hello', (cb) => {
    console.log('hello world')

    cb()
})

运行如下

F:\code\gulp-study>npx gulp hello
[07:26:55] Using gulpfile F:\code\gulp-study\gulpfile.js
[07:26:55] Starting 'hello'...
hello world
[07:26:55] Finished 'hello' after 3.4 ms

F:\code\gulp-study>

区别:

• 使用gulp流时,return
• 使用nodejs时,使用callback

gulp 基本内容

公开任务与私有任务

const gulp = require('gulp')

exports.hello = gulp.task('hello', (cb) => {
    console.log('hello world')
    cb()
})


gulp.task('copyfile',(cb)=>{
    console.log('copyfile')
})

执行结果

F:\code\gulp-study>npx gulp --tasks
[15:10:50] Tasks for F:\code\gulp-study\gulpfile.js
[15:10:50] ├── hello
[15:10:50] └── copyfile

F:\code\gulp-study>npx gulp hello
[15:10:58] Using gulpfile F:\code\gulp-study\gulpfile.js
[15:10:58] Starting 'hello'...
hello world
[15:10:58] Finished 'hello' after 7.96 ms

F:\code\gulp-study>npx gulp copyfile
[15:11:05] Using gulpfile F:\code\gulp-study\gulpfile.js
[15:11:05] Starting 'copyfile'...
copyfile
[15:11:05] The following tasks did not complete: copyfile
[15:11:05] Did you forget to signal async completion?

F:\code\gulp-study>

可读流与可写流

gulp.src创建可读流
gulp.dest创建可写流

顺序与并行

gulp 项目基本目标

项目构建类型

• 静态页面
• js库
• 与php整合
• 与spring boot整合

项目构建能力

• 单模块
• 多模块
• profile
• 增量构建

静态页面 + profile

基本版

只能用于开发环境,不考虑任何代码的合并与压缩
目录结构

gulpfile.js

const gulp = require('gulp')
const del = require('del')
const stylus = require('gulp-stylus')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const autoprefixer = require('gulp-autoprefixer')
const fileinclude = require('gulp-file-include')

// 端口
const port = 8099

// 输出目录
const dist_path = './dist'
// 源码目录
const src_path = './src'
// 源文件目录
const source_path = 'source'
// 中间文件目录,编译后的css,js等文件在此目录,html文件中引用的css,js等也在此目录下
const static_path = 'static'

const html_source = 'html/**/*.html'
const html_include_path = 'html/include'
const html_prefix = '@@'
const html_dist_path = 'source/html'

const style_source_path = 'stylus/**/*'
const style_src_path = 'css'

const script_source_path = 'js/**/*'
const script_src_path = 'js'
const script_dist_path = 'js'

const libs_source_path = 'libs/**/*'
const libs_src_path = 'libs'
const libs_dist_path = 'libs'

const img_source_path = 'image/**/*'
const img_src_path = 'image'
const img_dist_path = 'image'

function joinPath(paths) {
    if (Array.isArray(paths)) {
        return paths.join('/')
    }
    throw new Error('参数不是数组')
}

exports.clean = gulp.task('clean', function () {
	return del([dist_path, joinPath([src_path,static_path])])
})

exports.html = gulp.task('html', () => {
    return gulp.src(joinPath([src_path, source_path, html_source]))
        .pipe(fileinclude({
            prefix: html_prefix,
            basepath: joinPath([src_path,source_path,html_include_path])
        }))
        .pipe(gulp.dest(joinPath([dist_path, html_dist_path])))
        .pipe(browserSync.reload({stream: true}))

})

exports.style = gulp.task('style', () => {
    return gulp.src(joinPath([src_path, source_path, style_source_path]))
        .pipe(stylus())
        .pipe(autoprefixer())
        .pipe(gulp.dest(joinPath([src_path, static_path, style_src_path])))
        .pipe(gulp.dest(joinPath([dist_path, static_path,style_src_path])))
        .pipe(browserSync.reload({stream: true}))
})

exports.script = gulp.task('script',()=>{
    return gulp.src(joinPath([src_path,source_path,script_source_path]))
        .pipe(gulp.dest(joinPath([src_path,static_path,script_src_path])))
        .pipe(gulp.dest(joinPath([dist_path,static_path,script_dist_path])))
        .pipe(browserSync.reload({stream: true}))
})

exports.copyLibs = gulp.task('copyLibs',()=>{
    return gulp.src(joinPath([src_path,source_path,libs_source_path]))
        .pipe(gulp.dest(joinPath([src_path,static_path,libs_src_path])))
        .pipe(gulp.dest(joinPath([dist_path,static_path,libs_dist_path])))
        .pipe(browserSync.reload({stream: true}))
})

exports.copyImg = gulp.task('copyImg',()=>{
    return gulp.src(joinPath([src_path,source_path,img_source_path]))
        .pipe(gulp.dest(joinPath([src_path,static_path,img_src_path])))
        .pipe(gulp.dest(joinPath([dist_path,static_path,img_dist_path])))
        .pipe(browserSync.reload({stream: true}))
})



function watchFile() {
    gulp.watch(joinPath([src_path, source_path, html_source]), gulp.parallel('html'))
    gulp.watch(joinPath([src_path, source_path, style_source_path]), gulp.parallel('style'))
    gulp.watch(joinPath([src_path, source_path, script_source_path]), gulp.parallel('script'))
    gulp.watch(joinPath([src_path, source_path, libs_source_path]), gulp.parallel('copyLibs'))
    gulp.watch(joinPath([src_path, source_path, img_source_path]), gulp.parallel('copyImg'))
}

exports.watch = gulp.task('watch', (cb) => {
    watchFile()
    cb()
})

exports.server = gulp.task('server', (done) => {
    browserSync.init({
        port: port,
        server: {
            baseDir: [dist_path, src_path]
        }
    })
    done()
})

gulp.task('default', gulp.series(gulp.parallel('html','style','script','copyLibs','copyImg'), 'server', (done) => {
    watchFile()
    gulp.watch(dist_path + '/**/*', reload)
    done()
}))

可用版

实现功能

• eslint
• sourcemaps
• 增量构建
• 命令行参数

目录结构

package.json

{
  "name": "gulp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "npx gulp clean && npx gulp --env=dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "del": "^6.0.0",
    "eslint": "^7.18.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-cached": "^1.1.1",
    "gulp-clean-css": "^4.3.0",
    "gulp-debug": "^4.0.0",
    "gulp-eslint": "^6.0.0",
    "gulp-file-include": "^2.3.0",
    "gulp-remember": "^1.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-stylus": "^2.7.0",
    "gulp-uglify": "^3.0.2",
    "through2": "^4.0.2",
    "yargs": "^16.2.0"
  }
}

gulpfile.js

const gulp = require('gulp')
const debug = require('gulp-debug')
const del = require('del')
const stylus = require('gulp-stylus')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const autoprefixer = require('gulp-autoprefixer')
const fileinclude = require('gulp-file-include')
const cached = require('gulp-cached')
const remember = require('gulp-remember')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const cleanCss = require('gulp-clean-css')
const sourcemaps = require('gulp-sourcemaps')
const through = require('through2')
const arguments = require('yargs').argv
const eslint = require('gulp-eslint')


const isDev = 'dev' === arguments.env
const isTest = 'test' === arguments.env
const isProd = 'prod' === arguments.env

// 端口
const port = 8099

// 输出目录
const dist_path = './dist'
// 源码目录
const src_path = './src'
// 源文件目录
const source_path = 'source'
// 中间文件目录,编译后的css,js等文件在此目录,html文件中引用的css,js等也在此目录下
const static_path = 'static'

/* html */
const html_source = 'html/**/*.html'
const html_include_path = 'html/include'
const html_prefix = '@@'
const html_dist_path = 'source/html'

/* stylus */
const style_source_path = 'stylus/**/*'
const style_src_path = 'css'

/* javascript */
const script_source_path = 'js/**/*'
const script_src_path = 'js'
const script_dist_path = 'js'

/* 三方库 */
const libs_source_path = 'libs/**/*'
const libs_src_path = 'libs'
const libs_dist_path = 'libs'

/* 图片 */
const img_source_path = 'image/**/*'
const img_src_path = 'image'
const img_dist_path = 'image'

const joinPath = (paths) => {
    if (Array.isArray(paths)) {
        return paths.join('/')
    }
    throw new Error('参数不是数组')
}

const noop = () => {
    return through.obj()
}


const devProfile = (task) => {
    return isDev ? task : noop()
}

const testProfile = (task) => {
    return isTest ? task : noop()
}

const prodProfile = (task) => {
    return isProd ? task : noop()
}


exports.test = gulp.task('test', (cb) => {
    console.log(isDev)
    console.log(isTest)
    console.log(isProd)
    cb()
})

exports.clean = gulp.task('clean', function () {
    return del([dist_path, joinPath([src_path, static_path])])
})

exports.html = gulp.task('html', () => {
    return gulp.src(joinPath([src_path, source_path, html_source]))
        .pipe(fileinclude({
            prefix: html_prefix,
            basepath: joinPath([src_path, source_path, html_include_path])
        }))
        .pipe(gulp.dest(joinPath([dist_path, html_dist_path])))
        .pipe(browserSync.reload({stream: true}))

})

exports.style = gulp.task('style', () => {
    return gulp.src(joinPath([src_path, source_path, style_source_path]))
        .pipe(cached('styleTask'))
        .pipe(devProfile(sourcemaps.init()))
        .pipe(stylus())
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(cleanCss())
        .pipe(devProfile(sourcemaps.write('./', {addComment: true})))
        .pipe(remember('styleTask'))
        .pipe(gulp.dest(joinPath([src_path, static_path, style_src_path])))
        .pipe(gulp.dest(joinPath([dist_path, static_path, style_src_path])))
        .pipe(browserSync.reload({stream: true}))
})

exports.script = gulp.task('script', () => {
    return gulp.src(joinPath([src_path, source_path, script_source_path]))
        .pipe(cached('scriptTask'))
        .pipe(eslint({configFle:'./.eslintrc.js'}))
        .pipe(eslint.format())
        .pipe(devProfile(sourcemaps.init()))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(devProfile(sourcemaps.write('./', {addComment: true})))
        .pipe(remember('scriptTask'))
        .pipe(gulp.dest(joinPath([src_path, static_path, script_src_path])))
        .pipe(gulp.dest(joinPath([dist_path, static_path, script_dist_path])))
        .pipe(browserSync.reload({stream: true}))
})

exports.copyLibs = gulp.task('copyLibs', () => {
    return gulp.src(joinPath([src_path, source_path, libs_source_path]))
        .pipe(gulp.dest(joinPath([src_path, static_path, libs_src_path])))
        .pipe(gulp.dest(joinPath([dist_path, static_path, libs_dist_path])))
        .pipe(browserSync.reload({stream: true}))
})

exports.copyImg = gulp.task('copyImg', () => {
    return gulp.src(joinPath([src_path, source_path, img_source_path]))
        .pipe(gulp.dest(joinPath([src_path, static_path, img_src_path])))
        .pipe(gulp.dest(joinPath([dist_path, static_path, img_dist_path])))
        .pipe(browserSync.reload({stream: true}))
})


function watchFile() {
    gulp.watch(joinPath([src_path, source_path, html_source]), gulp.parallel('html'))
    gulp.watch(joinPath([src_path, source_path, style_source_path]), gulp.parallel('style'))
    gulp.watch(joinPath([src_path, source_path, script_source_path]), gulp.parallel('script'))
    gulp.watch(joinPath([src_path, source_path, libs_source_path]), gulp.parallel('copyLibs'))
    gulp.watch(joinPath([src_path, source_path, img_source_path]), gulp.parallel('copyImg'))
}

exports.watch = gulp.task('watch', (cb) => {
    watchFile()
    cb()
})

exports.server = gulp.task('server', (done) => {
    browserSync.init({
        port: port,
        open: false,
        server: {
            baseDir: [dist_path]
        }
    })
    done()
})

gulp.task('default', gulp.series(gulp.parallel('html', 'style', 'script', 'copyLibs', 'copyImg', 'watch'), 'server', (done) => {
    watchFile()
    gulp.watch(dist_path + '/**/*', reload)
    done()
}))