gulp是什么
gulp是一个打包工具,通过配置gulpfile.js来实现,和grunt一样可以通过多个 任务(task)来完成打包。
gulp比grunt更加简单易学
gulp官网
开始使用
安装项目依赖
npm install gulp --save-dev
创建gulpfile.js
栗子
压缩js ,这个栗子 把jquery 压缩 并重命名script.js 输出到build文件夹中
gulp-util记录错误日志
执行命令
gulp script
const gulp = require('gulp'),
uglify = require('gulp-uglify'), // 压缩文件
rename = require('gulp-rename') // 重命名
gulp.task('script', done => {
gulp
.src('./node_modules/jquery/dist/jquery.js')
.pipe(uglify()) // 压缩
.on('error', err => {
gulpUtil.log(gulpUtil.colors.red('Error'), err.toString());
})
.pipe(rename('script.js')) // 重命名
.pipe(gulp.dest('build')); // 输出到build 文件夹中
done();
});
es6
yarn add babel-core -D
// 按照babel-core 7 否则报找不到babel-core
yarn add gulp-babel@7 -D
const gulp = require('gulp'),
uglify = require('gulp-uglify'), // 压缩文件
rename = require('gulp-rename'), // 重命名
babel = require('gulp-babel')
gulp.task('script', done => {
gulp
.src('./node_modules/jquery/dist/jquery.js')
.pipe(babel({ presets: ['es2015'] }))
.pipe(uglify()) // 压缩
.on('error', err => {
gulpUtil.log(gulpUtil.colors.red('Error'), err.toString());
})
.pipe(rename('script.js')) // 重命名
.pipe(gulp.dest('build')); // 输出到build 文件夹中
done();
});
压缩html
执行命令
gulp html
const minifyHtml = require('gulp-minify-html')
gulp.task('html', done => {
gulp
.src('./index.html')
.pipe(minifyHtml())
.pipe(gulp.dest('build'));
done();
});
压缩css
执行命令
gulp css
const minifyCss = require('gulp-minify-css')
gulp.task('css', done => {
gulp
.src('./index.css')
.pipe(minifyCss())
.pipe(gulp.dest('build'));
done();
});
清理build文件夹
当我们打包时希望先将build文件夹情况,那我们就创建一个clean任务
const clean = require('gulp-clean'),
checkDir = path => {
console.log(fs.existsSync(path));
return fs.existsSync(path);
};
gulp.task('clean', d => {
// 只有这个文件夹存在时才 clean,不然会报错
if (checkDir('./build')) {
gulp.src('./build/').pipe(clean());
}
d();
});
压缩成zip包
npm install --save-dev gulp-zip
const gulpZip = require('gulp-zip')
gulp.task('script', done => {
gulp
.src('./node_modules/jquery/dist/jquery.min.js')
.pipe($.uglify())
.pipe(rename('script.js'))
.pipe(gulpZip('myWorld.zip'))
.pipe(gulp.dest('build'));
done();
});
按顺序执行这几个任务
// gulp3 可以这样写
gulp.task('default', ['clean','script','css', 'html'], ()=> {
console.log('default')
})
// gulp4
```js
gulp.task('default', gulp.series('clean', 'script', 'css', 'html', done => done()))
实战
在日常的开发时 ,我们希望把index.html引用的js,css分别合并压缩成一个文件
gulp也提供了这种方法,通过识别index.html中的注释来实现
栗子
注释的意思是 ,构建注释中的css 并合并压缩到css/css.css中
<!-- build:css css/css.css -->
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<!-- endbuild -->
构建注释中js,并并压缩到scripts/script.js中
<!-- build:js scripts/script.js -->
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./app.js"></script>
<script src="./js/snow.js"></script>
<!-- endbuild -->
gulpfile.js 执行gulp 就可以完成打包啦
gulp
const gulp = require('gulp'),
uglify = require('gulp-uglify'), // 压缩文件
rename = require('gulp-rename'), // 重命名
jshint = require('gulp-jshint'),
minifyHtml = require('gulp-minify-html'),
miniHtml = require('gulp-htmlmin'),
minifyCss = require('gulp-minify-css'),
imagemin = require('gulp-imagemin'),
useref = require('gulp-useref'),
csso = require('gulp-csso'),
rev = require('gulp-rev'),
revReplace = require('gulp-rev-replace'),
filter = require('gulp-filter'),
clean = require('gulp-clean'),
fs = require('fs'),
gulpIf = require('gulp-if'),
gulpUtil = require('gulp-util'),
babel = require('gulp-babel'),
gulpZip = require('gulp-zip'),
$ = require('gulp-load-plugins')();
// gulp.task('js', function () {
// return gulp.src('dist/js/*.js').pipe(uglify())
// })
// gulp.src('./node_modules/**/*.js').pipe(uglify()).pipe(gulp.dest('build'))
//js代码的处理
// gulp.task('vendor', function () {
// return gulp.src('./node_modules/**')
// .pipe(uglify())
// .pipe(rename('index.min.js'))
// .pipe(gulp.dest('build'))
// });
//js代码的处理
gulp.task('script', done => {
gulp
.src('./node_modules/jquery/dist/jquery.min.js')
.pipe($.uglify())
.pipe(rename('script.js'))
.pipe(gulp.dest('build'));
done();
});
// [20:08:56] The following tasks did not complete: default, script
// [20:08:56] Did you forget to signal async completion?
// gulp.task('css', function () {
// gulp.src('')
// })
// gulp.task('html', function () {
// gulp.src('./index.html')
// .pipe(minifyHtml())
// .pipe(gulp.dest('build'))
// })
gulp.task('html', done => {
gulp
.src('./index.html')
.pipe(minifyHtml())
.pipe(gulp.dest('build'));
done();
});
gulp.task('css', done => {
gulp
.src('./index.css')
.pipe(minifyCss())
.pipe(gulp.dest('build'));
done();
});
gulp.task('image', done => {
gulp
.src('./img/**')
.pipe(
imagemin({
progressive: true,
interlaced: true
})
)
.pipe(gulp.dest('build/img'));
done();
});
gulp.task('font', done => {
gulp.src('./css/font/**').pipe(gulp.dest('build/css/font'));
done();
});
const checkDir = path => {
console.log(fs.existsSync(path));
return fs.existsSync(path);
};
// gulp3 可以 gulp4 不可以
// gulp.task('default', ['script', 'html'], function () {
// console.log('default')
// })
// gulp.task('default', gulp.series('script', 'html', 'image', done => done()))
gulp.task('clean', d => {
if (checkDir('./build')) {
gulp.src('./build/').pipe(clean());
}
d();
});
gulp.task(
'default',
gulp.series('clean', 'font', 'image', done => {
const jsFilter = filter('**/*.js', {
restore: true
}),
cssFilter = filter('**/*.css', {
restore: true
}),
// 第一个参数代表所有 第二个参数代表除了index.html
indexHtmlFilter = filter(['**/*', '!index.html'], {
restore: true
});
// pump
gulp
.src('index.html')
.pipe($.useref()) /**找到注释 */
.pipe(jsFilter) /**筛选js */
.pipe(babel({ presets: ['es2015'], compact: false }))
.pipe(uglify()) /**压缩js */
.on('error', err => {
gulpUtil.log(gulpUtil.colors.red('Error'), err.toString());
})
.pipe(jsFilter.restore) /** 把js文件扔回流里 */
.pipe(cssFilter)
// .pipe(minifyCss())
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(
rev()
) /**前面的filter排除了index.html 然后再打版本号 gulp-rev 为静态文件随机添加hash值 */
.pipe(indexHtmlFilter.restore)
.pipe(revReplace()) /**更新index中的引用 */
// .pipe(minifyHtml()) // 压缩后 js报错
// .pipe(miniHtml({ removeComments: true }))
.pipe(gulp.dest('build'))
.pipe(gulpZip('myWorld.zip'))
.pipe(gulp.dest('build'));
done();
})
);
gulp-load-plugins
可以更简单的应用gulp的插件
const $ = require('gulp-load-plugins')();
gulp.task('script', done => {
gulp
.src('./node_modules/jquery/dist/jquery.min.js')
// .pipe(uglify()) // 原来的写法
.pipe($.uglify())
.pipe(rename('script.js'))
.pipe(gulp.dest('build'));
done();
});
常见的问题
- 执行代码检查时的问题
Error: Cannot find module 'jshint/src/cli'
npm install --save-dev gulp-jshint
npm install --save-dev jshint
- 顺序执行任务时的问题
AssertionError [ERR_ASSERTION]: Task function must be specified
https://blog.csdn.net/JsongNeu/article/details/89284959
- gulp异步问题
Did you forget to signal async completion?
问题console
PS E:\Practice\myWorld> gulp script
[09:49:23] Using gulpfile E:\Practice\myWorld\gulpfile.js
[09:49:23] Starting 'script'...
[09:49:24] The following tasks did not complete: script
[09:49:24] Did you forget to signal async completion?
问题代码
gulp.task('script', () => {
gulp
.src('./node_modules/jquery/dist/jquery.min.js')
.pipe($.uglify())
.pipe(rename('script.js'))
.pipe(gulp.dest('build'));
// done();
});
正确代码
gulp.task('script', done => {
gulp
.src('./node_modules/jquery/dist/jquery.min.js')
.pipe($.uglify())
.pipe(rename('script.js'))
.pipe(gulp.dest('build'));
done();
});
- [BABEL] Note: The code generator has deoptimised the styling of “E:/Practice/myWorld/scripts/three.js” as it exceeds the max of “500KB”.
compact设为false
.pipe(babel({ presets: ['es2015'], compact: false }))
gulp
.src('index.html')
.pipe($.useref()) /**找到注释 */
.pipe(jsFilter) /**筛选js */
.pipe(babel({ presets: ['es2015'], compact: false }))
.pipe(uglify()) /**压缩js */
.on('error', err => {
gulpUtil.log(gulpUtil.colors.red('Error'), err.toString());
})
20190524更新
gulp 打包过的文件如果没有改动,下次再打包时不会重新打包
gulp打包时报错 Error: ENOENT: no such file or directory, chmod ‘E:\Practice\myWorld\build\img\bg’
PS E:\Practice\myWorld> gulp
[13:41:56] Using gulpfile E:\Practice\myWorld\gulpfile.js
[13:41:56] Starting 'default'...
[13:41:56] Starting 'clean'...
true
[13:41:56] Finished 'clean' after 6.39 ms
[13:41:56] Starting 'font'...
d
[13:41:56] Finished 'font' after 10 ms
[13:41:56] Starting 'image'...
[13:41:56] Finished 'image' after 3.97 ms
[13:41:56] Starting 'hero'...
[13:41:56] Finished 'hero' after 3.15 ms
[13:41:56] Starting '<anonymous>'...
[13:41:56] Finished '<anonymous>' after 6.04 ms
[13:41:56] Finished 'default' after 37 ms
events.js:174
throw er; // Unhandled 'error' event
^
Error: ENOENT: no such file or directory, chmod 'E:\Practice\myWorld\build\img\bg'
Emitted 'error' event at:
at Pumpify.EventEmitter.emit (domain.js:454:12)
at Pumpify.onerror (E:\Practice\myWorld\node_modules\readable-stream\lib\_stream_readable.js:640:52)
at Pumpify.emit (events.js:189:13)
at Pumpify.EventEmitter.emit (domain.js:441:20)
at Pumpify.Duplexify._destroy (E:\Practice\myWorld\node_modules\duplexify\index.js:191:15)
at E:\Practice\myWorld\node_modules\duplexify\index.js:182:10
at process._tickCallback (internal/process/next_tick.js:61:11)
参考
https://blog.csdn.net/JsongNeu/article/details/90515468
20190531更新
gulp任务分散到不同的文件中
当任务比较多的是时候,会有一个比较长的gulpfile.js,为了方便维护,我们可以把gulpfile的任务拆分成多个多文件,一个文件中包含一个任务
新建一个gulpfile.js,用于引用gulp任务。
新建task文件夹,用于存放gulp任务
需要用到的插件require-dir
npm install -D require-dir
文件目录
gulpfile.js
task/
|—uglify.js
const requireDir = require(‘require-dir’),
dir = requireDir(’./task’);
gulpfile.js
const requireDir = require('require-dir'),
gulp = require('gulp'),
dir = requireDir('./task');
gulp.task('default', gulp.series('script'));
task/uglify.js
const gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
babel = require('gulp-babel');
gulp.task('script', done => {
// 打包es6 一定要用babel 不然报错
gulp
.src('es6.js')
.pipe(babel({ presets: ['es2015'] }))
.pipe(uglify())
.pipe(rename('script.js'))
.pipe(gulp.dest('build'));
done();
});