前端 gulp 构建项目命令总结
Posted 一个学前端的码农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 gulp 构建项目命令总结相关的知识，希望对你有一定的参考价值。
安装
npm i -g gulp-cli
npm i gulp --save-dev
// 或者使用 yarn
yarn add gulp --dev
--save-dev
的意思是把它写入 package.json 的 devDependencies 下，也就是开发环境依赖。
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
配置文件
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()
});
jshint
的任务，执行它就会检查 src/js/ 目录下的所有 js 文件，在这之前，你可以在项目根目录下创建
.jshintrc
文件，在里面配置 js 代码的校验规则。这样在提交代码前，打开终端，进到项目目录下，执行
gulp jshint
，
就可以检查 js 代码。
gulp.task('jshint', async() => {
await gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
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 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 构建项目命令总结的主要内容，如果未能解决你的问题，请参考以下文章