gulp4.0版入门及常用插件，gulp创建前端项目
2019-10-10 本文已影响0人
Mihansy
本篇为gulp学习笔记。
gulp安装及创建前端项目
1，先安装node，npm，cnpm
2，全局安装gulp脚手架工具：cnpm install --global gulp-cli
3，创建项目：npx mkdirp myproject 进入该项目：cd myproject
4，在项目根目录下，创建package.json文件：cnpm init
5，安装gulp，作为项目开发时的依赖项：cnpm install gulp --save-dev
6，检查gulp版本：gulp --version
cli脚手架和本地版本都成功即可，如下：
CLI version: 2.2.0
Local version: 4.0.2
7，自己在编辑器中创建gulpfile.js文件，这是gulp配置文件。
在配置文件 gulpfile.js 中，引入gulp和gulp常用插件：
//src获取文件，dest拷贝文件，pipe让文件流走入下一个环节，watch监听文件变化，parallel并行任务，series串行任务
const { src, dest, watch, parallel, series } = require('gulp')
const htmlMin = require('gulp-htmlmin') //压缩html文件
const less = require('gulp-less') //用于把less文件编译成css文件
const minifyCss = require('gulp-clean-css') //压缩css文件
const minifyJs = require('gulp-uglify') //压缩js文件
const concat = require('gulp-concat') //合并多个js文件为一个js文件
const rename = require('gulp-rename') //重命名文件
const imageMin = require('gulp-imagemin') //压缩图片
const clean = require('gulp-clean') //每次构建gulp之前，清除目标文件dist
const fileInclude = require('gulp-file-include') //模块化：在页面中引入公共头部/底部等模块
const connect = require('gulp-connect') //创建本地服务器，浏览器页面自动刷新
const autoprefixer = require('gulp-autoprefixer') //兼容处理，根据浏览器自动添加css前缀。需要在package.json中添加browserslist键名
//gulp自动给css,js批量添加版本号，解决缓存
const rev = require('gulp-rev') //版本号生成插件（hash编码）
const revCollector = require('gulp-rev-collector') //替换版本号路径插件
//const runSequence = require('run-sequence') //同步执行任务，有了series后，用不上了
设置任务：
const serverConfig = {
root: 'dist', //从哪个目录开启server
port: 3000, //端口
livereload: true //自动刷新
}
function server() { //启动服务器任务
connect.server(serverConfig)
}
//将头部,底部等公共模块，include进入到各个需要的html页面中，
//将html文件中的css,js文件引入路径全部替换成带有版本号的
//然后压缩html，然后复制输出到dist文件夹，最后自动刷新页面。
function html() {
var options = {
collapseWhitespace: true, //清除空格，压缩html
collapseBooleanAttributes: true, //省略布尔属性的值
removeComments: true, //清除html中注释的部分
removeEmptyAttributes: true, //清除所有的空属性
removeScriptTypeAttributes: true, //清除所有script标签中的type="text/javascript"属性。
removeStyleLinkTypeAttributes: true, //清楚所有Link标签上的type属性。
minifyJS: true, //压缩html中的javascript代码。
minifyCSS: true //压缩html中的css代码。
};
//src第一个参数是生成的json路径，第二个参数是要更换的html
return src(['dist/static/**/*.json', 'src/view/**/*.html'])
.pipe(fileInclude({
prefix: '@@', //变量前缀 @@include
basepath: 'src/view/common' //引用文件路径，即公共头部底部模块的路径
}))
.pipe(revCollector()) //更换html中引入的css，js版本
.pipe(htmlMin(options)) //压缩html
.pipe(dest('dist')) //将处理后的html输出到dist文件夹中
.pipe(connect.reload()) //当html发生变化时，自动刷新页面
}
function css(){
return src('src/static/css/*')
.pipe(autoprefixer()) //给浏览器添加前缀，兼容样式
.pipe(less()) //将.less文件编译为.css文件
.pipe(minifyCss()) //将编译后的css文件压缩
.pipe(rev()) //将所有匹配到的文件名全部生成相应的版本号
.pipe(dest('./dist/static/css')) //将css文件输出到dist目录
.pipe(rev.manifest()) //把所有生成带版本号的文件名全部保存到json文件中
.pipe(dest('./dist/static/css')) //把json文件保存到以下路径中
}
function js(){
return src('src/static/js/**/*.js')
.pipe(rename({suffix:'.min'})) //重命名 xxx.min.js
.pipe(minifyJs()) //压缩js文件
//.pipe(concat('all.min.js')) //合并所有js文件为一个
.pipe(rev()) //js文件生成版本号,
.pipe(dest('./dist/static/js')) //将js文件输出到dist/js目录下
.pipe(rev.manifest()) //并将所有带有版本号的文件放入json中
.pipe(dest('./dist/static/js')) //把json文件输出到dist/js目录下
}
function destJsLib(){ //复制js文件夹下面的lib到dist目录中
return src('src/static/js/lib/**/*')
.pipe(dest('dist/static/js/lib'))
}
function image() {
return src('src/static/image/*')
.pipe(imageMin()) //压缩图片
.pipe(dest('dist/static/image'))
}
//监听html，js，css文件变化，重新构建dist文件
function watcher() {
//watch第一个参数是glob字符串或数组，
//第二个参数是function或series/parallel
//return watch(['src/view/**/*.html', 'src/static/js/**/*.js','src/static/css/*'], parallel(html, js,css))
//watch()方法也可以不使用return，多个watch这么写时，触发哪个就执行哪个，不会同时执行多个watch
watch('src/view/**/*.html', series(html))
watch('src/static/js/**/*.js', series(js))
watch('src/static/css/*', series(css))
}
function del() { //每次构建之前，先清除dist文件
return src('./dist/*')
.pipe(clean())
}
function build(cb) { //打包生成文件
console.log('打包生成文件，需要在这里修改服务器API')
cb()
}
执行任务：
//执行gulp命令，默认执行default任务，生成开发环境dist文件夹
exports.default = series(del, parallel(destJsLib, image), css, js, html, parallel(server, watcher))
//series(任务1，任务2，……) 按顺序执行认任务
//parallel(任务1，任务2，……) 同时执行任务，并发执行任务
//也可以执行gulp build命令，打包生成文件，这是生产环境build文件，提交给服务器更新用
exports.build = build
最后，在cmd终端输入gulp，默认执行exports.default任务。
也可以执行多个任务，使用 gulp taskName执行。
以上就是gulpfile.js文件中的内容，可以自己配置。
另外需要注意，在使用gulp插件自动给css,js批量添加版本号时，需要修改node_modules插件配置，如下如下几处：
1，更改gulp-rev文件（node_modules--->gulp-rev--->index.js）
将 manifest[originalFile] = revisionedFile;
改为 manifest[originalFile] = originalFile + '?v=' + file.revHash;
2，更改rev-path文件（node_module--->gulp-rev--->node_module--->rev-path--->index.js）
将 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
3，更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)
将 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
改为 var cleanReplacement = path.basename(json[key]).split('?')[0];
4，更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)
将 regexp: new RegExp( prefixDelim + pattern, 'g' ),
改为 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),
如果不做这些配置的话，css，js文件后面跟着的时一些hash数据，配置后，就变成以下这样，每次更改css，js文件后，?v=后面版本号自动变化，清除缓存。
