TODO
- typescript 编写gulpfile
- gulpfile分割
安装
# 安装
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()
}))