最近做了一个比较 mini 的项目,使用的是原生 JS 和 jQuery,想着平时都是用 webpck 来打包,这次这个简单点,不如试试别的,折腾一下。于是就选了 gulp,以前没用过,对 gulp 还是一知半解,所以折腾了几个小时才搭建好,这里也记录下。
安装
在安装之前,需要有 node 和 npm 的环境,没安装的要记得先安装,参考 node 官网或其他很多很多很多的文章,都有详细的说明。
npm i -g gulp-cli
全局安装命令行工具,接着 cd 进入到你的项目根目录
npm i gulp --save-dev
// 或者使用 yarn
yarn add gulp --dev
--save-dev
的意思是把它写入 package.json 的 devDependencies 下,也就是开发环境依赖。
到这,gulp 就安装好了。目前最新的是 gulp4 ,我在网上搜的一些写法都是 gulp3 的,所以报错比较多。对于 gulp 来说,主要使用一系列异步执行的 task 任务来完成相关操作。用得最多就是 gulp.task
定义一个任务,然后在回调函数里执行我们想做的操作。
插件
gulp.task()
只是创建一个执行任务,真正项目构建过程中,我们需要用到许多的插件来辅助完成一系列操作,比如代码压缩,文件合并等等。这里介绍下常用的插件:
- gulp-jshint
代码检查,用了这个后有点后悔,配置太麻烦了,建议还是用 eslint 好了 - gulp-sass
由于用 sass 书写,所以这是编译 sass 的插件,对于 less 或其他来说,也可以去 npm 上搜索相关插件 - gulp-imagemin 图片压缩用的
- gulp-rev
这个很重要,给 css 和 js 文件添加 hash ,防止缓存。一大堆缓存导致你改了东西都没反应,简直让人抓狂 - gulp-rev-collector
配合 gulp-rev 用的,自动给 html 文件引入加上 hash 后的 css 或 js 文件 - gulp-htmlmin
这个是用来压缩 html 文件的,所有文件能压缩的就压缩,节省空间 - gulp-concat
这个是用来合并文件的,比如将所有 js 都合并为一个大的 js ,再引入 - gulp-uglify
这个是用来压缩 js 文件的 - gulp-rename
这个是用来给文件重命名的,比如前面我们将所有 js 文件合并为一个大文件后,可以进行重命名,方便 html 统一写入 - del
这个是用来清除 dist 目录的,每次打包之前都先把上次打包的 clean 掉,反正新旧混一起,出现什么意想不到的 - browser-sync
这个也很关键,看名字就知道,是用来启动本地服务的,并且可以做到更改代码后自动刷新浏览器预览最新效果 - opn
配合 browser-sync 使用,打开特定的网页地址
上述插件可以使用以下命令进行安装:
npm i 插件名字 --save-dev
// 或者
yarn add 插件名字 --dev
至于具体的用法,推荐到 npm 官网去具体查询某个库,里面有详细的介绍和使用说明。
配置文件
gulp 主要是使用 gulpfile.js
文件来进行项目配置,在你的项目根目录下创建这个文件。gulp 通过 task 来创建一个任务,通过 gulp + 任务名来执行一个任务。比如下面这个示例:
var gulp = require('gulp')
var jshint = require('gulp-jshint')
gulp.task('jshint', done => {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
done()
});
上述代码首先引入了 gulp ,然后引入了 gulp-jshint 这个插件,记得先 npm install 下,接着使用 taks 定义了一个任务,src() 方法用于获取路径文件,可以使用正则进行快速匹配;pipe() 方法用于管道传输,可以多次调用,执行不同的操作。通过定义名为 jshint
的任务,执行它就会检查 src/js/ 目录下的所有 js 文件,在这之前,你可以在项目根目录下创建 .jshintrc
文件,在里面配置 js 代码的校验规则。这样在提交代码前,打开终端,进到项目目录下,执行 gulp jshint
,就可以检查 js 代码。
这里注意的是,最新的 gulp4 的语法跟之前不同,每一个 task 都是一个异步任务,你可以像上面一个传递一个回调(done), 在执行完后调用 done 回调表示完成,也可以直接写 async 语法,类似下面这样:
gulp.task('jshint', async() => {
await gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
基本使用就是这样。通常在项目里,我们需要一系列操作,压缩图片,代码,编译 scss/less 之类的,也就相应需要定义多个 task,这里列下我的配置文件,仅供参考:
var gulp = require('gulp');
// 插件
var jshint = require('gulp-jshint'); //js代码校验
var sass = require('gulp-sass'); //编译css
var imagemin = require('gulp-imagemin'); //压缩图片
var rev = require('gulp-rev') // 给文件添加 hash,防止缓存
var revCollector = require('gulp-rev-collector') // 把加 hash 的文件注入到 html
var gulpHtmlMin = require('gulp-htmlmin') // html 压缩
var uglify = require('gulp-uglify'); // js 压缩
var cleanCSS = require('gulp-clean-css') //css 压缩
// 浏览器实时预览
var browserSync = require('browser-sync');
var opn = require('opn');
var path = {
sass: './src/css/*.scss',
css: './src/css/*.css',
js: './src/js/*.js',
html: './src/*.html',
src: './'
};
// 检查脚本
gulp.task('jshint', done => {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
done();
});
// 编译Sass
gulp.task('sass', done => {
gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'))
done()
});
gulp.task('css', done => {
gulp.src('./src/css/*.css')
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(rev())
.pipe(gulp.dest('./dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'))
done()
})
gulp.task('sass:dev', done => {
gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'));
done()
})
// 压缩图片
gulp.task('imagemin', done => {
gulp.src('./src/image/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
}))
.pipe(gulp.dest('./dist/image'));
done()
});
// 合并,压缩js文件
gulp.task('scripts', done => {
gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/js'));
done()
});
gulp.task('revCollector', done => {
gulp.src(['./rev/**/*.json', './src/*.html'])
.pipe(revCollector(
{
replaceReved: true,
dirReplacements: {
'css': './css',
'js': './js'
}
}
))
.pipe(gulpHtmlMin({
//删除空格
collapseWhitespace : true,
//删除注释
removeComments : true
}))
.pipe(gulp.dest('./dist'))
done()
})
// 启动服务,在浏览器打开
gulp.task('serve', done => {
browserSync.init({
server: {
baseDir: path.src
},
port: 5501,
open: false
}, function() {
var homepage = 'http://localhost:5501/src/index.html';
opn(homepage);
});
// 编译完sass后,无刷新方式更新页面
gulp.watch(path.sass, gulp.series('sass:dev'));
// 修改页面和js后,页面刷新,重新加载
gulp.watch([path.html, path.js, path.sass]).on("change", function() {
browserSync.reload();
});
done()
})
gulp.task('watch', done => {
gulp.watch('./src/css/*.scss', gulp.series('sass'));
gulp.watch('./src/js/*.js', gulp.series('jshint', 'scripts'));
gulp.watch('./src/image/**', gulp.series('imagemin'))
done()
})
gulp.task('build', gulp.series('jshint', 'sass', 'css', 'scripts', 'imagemin', 'revCollector'))
gulp.task('start', gulp.series('sass:dev', 'serve'))
可以看到,最后两句代码,使用 gulp.task 定义了一个 build 和 start 的任务,使用 gulp.series 将前面定义的任务都串联起来同步执行,所以执行 gulp start
,就可以启动服务,在浏览器实时预览了;执行 gulp build
就可以打包压缩在 dist 目录下。我们可以在 package.json
文件中修改:
"scripts": {
"dev": "gulp start",
"build": "gulp build"
},
这样就可以执行 npm run dev
运行项目,npm run build
打包项目;如果你使用 yarn 的话,执行 yarn dev
和 yarn build
。
报错
-
Did you forget to signal async completion
解决:就是没有执行回调导致的,通过传入一个回调,比如 done ,结尾执行 done() 即可,或者直接写 async 和 await 。 -
AssertionError: Task function must be specified
解决:主要就是 gulp3 和 gulp4 语法的差异,以前写一个任务是:gulp.task('test', ['a', 'b'], ...) 表示这个 test 任务在 a 和 b 执行完后才执行,这是以前的写法,现在应该用gulp.series('a', 'b', 'test')
表示依次执行 a、b、test 。
总结
对于 gulp 的话,首先还是熟读官网文档,了解基本的语法和使用示例,然后就可以网上找对应的插件来使用,比如你想压缩图片,那就搜 gulp 相关的图片压缩插件,再去 npm 官网了解插件的具体操作。最后写 task 将这些插件串联起来执行,基本就是这样。
(完)