利用gulp 4.0搭建前端项目

vlambda
2020-10-17

利用gulp 4.0搭建前端项目

代码示例已上传至GitHub代码库JS-Web-Skill^[1]，你可以下载下来启动项目，帮助你阅读本篇文章

本篇文章我已放到我的博客zongqiang-bookmarks^[2]，你可以访问我的博客阅读更多文章内容首先保证你的电脑已经安装了node，如果没有安装node可以去node官网安装

然后cmd中输入以下命令，查看本地是否安装了gulp

gulp --version // 2.0.1

cmd中输入以下命令，查看本地是否安装了node

node --version // 12.16.2

这里需要注意，如果你的node升级到了10，而本地安装的是gulp旧版本，比如2版本，就不能正常运行，需要先卸载gulp然后再重新安装最新的版本（截止到2020-10-12，gulp最新版本是4.0.2）

由于我的版本过低，这里我先把老版本的gulp卸载掉，执行如下命令：

npm uninstall gulp --global

在我的电脑上cmd执行npm uninstall gulp -g竟然报错，报错内容如下：

Maximum call stack size exceeded

试了好多方式仍然不行，可能是因为node或者npm版本导致的，看来只有手动删除了，首先cmd中运行如下命令：

npm config list

可以看到输出的结果中有如下一行：

prefix = "C:\Users\喔喔牛在路上\AppData\Roaming\npm"

这是一个路径，你通过npm全局安装的插件都保存在这个位置，cmd中执行如下命令，进入到这个文件里：

cd C:\\Users\\喔喔牛在路上\\AppData\\Roaming\\npm

然后在这个文件的根目录下执行dir命令，查看都安装了哪些插件：

C:\Users\喔喔牛在路上\AppData\Roaming\npm>dir

输出结果如下：

C:\Users\喔喔牛在路上\AppData\Roaming\npm 的目录
2020/10/12 15:37 <DIR> .2020/10/12 15:37 <DIR> ..2020/07/15 15:53 332 cnpm2020/07/15 15:53 283 cnpm.cmd2020/07/15 15:53 502 cnpm.ps12019/01/28 15:42 321 grunt2019/01/28 15:42 198 grunt.cmd2020/10/12 15:37 346 gulp2020/10/12 15:37 353 gulp.cmd2020/10/12 15:37 516 gulp.ps12020/05/28 19:44 335 nodemon2020/05/28 19:44 212 nodemon.cmd2020/10/12 15:36 <DIR> node_modules2020/02/11 11:03 329 vue2020/02/11 11:03 206 vue.cmd2019/10/11 16:33 321 vuepress2019/10/11 16:33 198 vuepress.cmd2019/02/13 22:07 323 yarn2019/02/13 22:07 200 yarn.cmd2019/02/13 22:07 323 yarnpkg2019/02/13 22:07 200 yarnpkg.cmd

咱们进入到这个文件夹，手动删除gulp，gulp.cmd，gulp.ps1，删除完毕关闭cmd，然后重新打开cmd输入如下命令：

gulp -v

输出结果如下：

gulp' 不是内部或外部命令，也不是可运行的程序或批处理文件。

好了，这样代表已经删除成功，咱们再来重新安装gulp：

npm/cnpm install --global gulp-cli

安装完毕后创建一个项目，项目名为JS_Web_Skill

然后cmd进入到此项目的根目录，执行以下命令

1.cd JS_Web_Skill // 进入项目根目录2.npm/cnpm init // 在项目根目录创建package.json文件3.npm/cnpm install gulp --save-dev // 在项目里安装gulp，作为开发时的依赖4.npm/cnpm install gulp-autoprefixer gulp-cache gulp-clean gulp-connect gulp-file-include gulp-imagemin gulp-jshint gulp-less gulp-minify-css gulp-minify-html gulp-rev gulp-rev-collector gulp-uglify gulp-util imagemin-pngquant http-proxy-middleware --save-dev // 安装这些gulp插件

如果要在你的项目里安装这些依赖，最好参考我的package.json^[3]里的插件版本安装，防止启动项目的时候报错

接下来改造我创建的项目JS_Web_Skill，其目录结构如下：

题外话：为了方便了解某个项目，一般都会在readme文档里对整个项目的目录结构做个说明，这里说一下如何快速得到文件目录结构，首先你要全局安装
npm/cnpm install mddir -g
安装完毕，cd进入你的项目中：
cd E:\project\JS-Web-Skill
然后在此项目目录下执行mddir
E:\project\JS-Web-Skill>mddir
执行完毕，就可以在你的根目录下得到directoryList.md文件，这里面为你自动生成了文件目录，把它复制到你的readme.md文件中即可

代码我已上传至GitHub，也可以参考JS-Web-Skill^[4]来查看我是怎么创建的项目

关于项目中每个文件和文件夹的作用，我在README.md^[5]做了介绍，你可以参考便于了解本项目，为什么选择把打包后的文件放到static文件中，这是为了如果项目中使用node等服务层框架，可以一并打包放入dist下，这样，dist就是一个完整的包括前后端服务的项目目录了

为了区分开发环境和生产环境，所以在config文件夹里，使用gulp.dev.js来处理开发环境的任务，使用gulp.prod.js来处理生产环境的任务

1. config.js文件

// config/config.js

module.exports = { dist: './dist/static', // 配置构建目录}

2. gulp.dev.js文件

// config/gulp.dev.js

const gulp = require('gulp');// const { series, parallel, src, dest, watch } = require('gulp');
// const Jshint = require('gulp-jshint'); // js检查const Gutil = require('gulp-util'); // 类似于console.logconst { createProxyMiddleware } = require('http-proxy-middleware'); // 跨域设置const Less = require('gulp-less'); // 编译lessconst FileInclude = require('gulp-file-include'); // 文件模块化const Connect = require('gulp-connect'); // 浏览器刷新const Clean = require('gulp-clean'); // 清理目录
// 获取配置文件const config = require('./config');const { dist } = config;
// 压缩htmlasync function html() { return gulp.src('src/views/*.html') .pipe(FileInclude({ // HTML模板替换 prefix: '##', basepath: '@file' })) .on('error', function(err) { console.error('Task:copy-html,', err.message); this.end(); }) .pipe(gulp.dest(dist)) // 拷贝 .pipe(Connect.reload()); // 刷新浏览器}
// cssasync function css() { return await gulp.src('src/css/*.less') .pipe(Less()) // 编译less .pipe(gulp.dest(dist + '/css')) // 拷贝 .pipe(Connect.reload()); // 刷新}
// jsasync function js() { return await gulp.src('src/js/**') // .pipe(Jshint()) // 检查代码 .on('error', function(err) { Gutil.log(Gutil.colors.red('[error]'), err.toString()) }) .pipe(gulp.dest(dist + '/js')) // 拷贝 .pipe(Connect.reload()); // 刷新}
// imageasync function image() { return await gulp.src('src/images/*') .pipe(gulp.dest(dist + '/images')) // 拷贝 .pipe(Connect.reload()); // 刷新}
// cleanasync function clean() { return await gulp.src(dist, {allowEmpty: true}) .pipe(Clean()); // 删除之前生成的文件}
// 启动服务器async function server() { Connect.server({ root: dist, // 根目录 // ip: '192.168.1.65', // 默认localhost:8080 livereload: true, // 自动更新 port: 8090, middleware: function(connect, opt) { return [ createProxyMiddleware('/api', { target: 'http://localhost:8080', changeOrigin: true }), createProxyMiddleware('/idcMonitorServer', { target: 'http://10.0.0.186:18090', changeOrigin: true }), ] } })}
module.exports = { html, css, js, image, clean, server}

3. gulp.prod.js文件

// config/gulp.prod.js

const gulp = require('gulp');
const Uglify = require('gulp-uglify'); // 压缩jsconst Minifycss = require('gulp-minify-css'); // 压缩cssconst Less = require('gulp-less'); // 编译lessconst Autoprefixer = require('gulp-autoprefixer'); // 浏览器前缀const Minifyhtml = require('gulp-minify-html'); // 压缩htmlconst FileInclude = require('gulp-file-include'); // 文件模块化const Imagemin = require('gulp-imagemin'); // 压缩图片const Pngquant = require('imagemin-pngquant'); // png图片压缩const Cache = require('gulp-cache'); // 压缩图片会占用较长时间，使用此插件可以减少重复压缩const Clean = require('gulp-clean'); // 清理目录const rev = require('gulp-rev'); // 为静态文件随机添加一串hash值，解决浏览器缓存问题，防止项目打包上线以后，由于浏览器缓存项目加载不到最新修改的js或者css代码const revCollector = require('gulp-rev-collector'); // 根据gulp-rev生成的manifest.json文件中的映射，将html中的路径替换
// 获取配置文件const config = require('./config');const { dist } = config;
// cssasync function css() { return await gulp.src('src/css/**') .pipe(Less()) .pipe(Autoprefixer({ cascade: true, // 添加前缀 remove: true // 去掉不必要的前缀 })) .pipe(Minifycss({ advanced: true, // 开启高级优化（合并选择器等） compatibility: '', // 保留IE7及以下兼容写法，其值有4种['': 启用兼容模式，'ie7': IE7兼容模式，'ie8': IE8兼容模式， '*': IE9+兼容模式] keepBreaks: false, // 是否保留换行 keepSpecialComments: '*' // 保留所有特殊前缀，当调用Autoprefixer生成css前缀时，如果这里不设置，有可能会删除你的部分前缀 })) // .pipe(gulp.dest(dist + '/css')) .pipe(rev()) .pipe(gulp.dest(dist + '/css')) .pipe(rev.manifest()) // CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射 .pipe(gulp.dest('rev/css'));}
// jsasync function js() { return await gulp.src('src/js/**') .pipe(Uglify()) // 压缩js // .pipe(gulp.dest(dist + '/js')) .pipe(rev()) .pipe(gulp.dest(dist + '/js')) .pipe(rev.manifest()) // js生成文件hash编码并生成 rev-manifest.json文件名对照映射 .pipe(gulp.dest('rev/js'));}async function html() { return gulp.src(['rev/**/*.json', 'src/views/*.html']) .pipe(revCollector({ // 利用rev-manifest.json完成html中url的替换 replaceReved: true, dirReplacements: { // 'css': 'dist/css', // 将URL中的css替换为css,真实相同则不必写 // 'js': 'js', // '//cdn': function(manifest_value) { // 如果使用了cdn可以这样写 // return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value; // } } })) .pipe(FileInclude({ // HTML模板替换 prefix: '##', basepath: '@file' })) .pipe(Minifyhtml()) .on('error', function(err) { console.error('Task:copy-html,', err.message); this.end(); }) .pipe(gulp.dest(dist))}// imageasync function image() { return await gulp.src('src/images/*') .pipe(Cache(Imagemin({ optimizationLevel: 5, // 优化等级，默认值3 取值范围：0-7 progressive: true, // 无损压缩jpg图片 interlaced: true, // 隔行扫描gif进行渲染 multipass: true, // 多次优化svg直到完全优化 svgoPlugins: [{ removeViewBox: false }], // 不要移除svg的viewbox属性 use: [Pngquant()] // 使用Pngquant插件深度压缩png图片 }))) .pipe(gulp.dest(dist + '/images')) // 拷贝 }
 // clean async function clean() { return await gulp.src(dist, {allowEmpty: true}) .pipe(Clean()); // 删除之前生成的文件 }
 module.exports = { css, js, image, html, clean }

4. gulpfile.js文件

// gulpfile.js 
const gulp = require('gulp');
// 根据环境引入不同的配置文件let buildConfig;if(process.env.NODE_ENV === 'dev') { buildConfig = require('./build/gulp.dev'); gulp.task('server', buildConfig.server); // 起一个本地服务器} else { buildConfig = require('./build/gulp.prod'); gulp.task('clean', buildConfig.clean); // 清理目录}
gulp.task('html', buildConfig.html); // 打包htmlgulp.task('js', buildConfig.js); // 打包jsgulp.task('css', buildConfig.css); // 打包cssgulp.task('image', buildConfig.image); // 打包iamge// gulp.task('sources', gulp.series('html', gulp.parallel('js', 'css', 'image')));gulp.task('sources', gulp.series('js', 'css', 'image', 'html'));// 监听文件变化gulp.task('watch', async () => { gulp.watch('src/views/*', gulp.series('html')); // 监听html变化 gulp.watch('src/js/**', gulp.series('js')); // 监听js变化 gulp.watch('src/css/*', gulp.series('css')); // 监听css变化 gulp.watch('src/images/*', gulp.series('image')); // 监听image变化});
if (process.env.NODE_ENV === 'dev') { gulp.task('dev', gulp.series('sources', 'server', 'watch'));} else { gulp.task('build', gulp.series('sources'))}

gulpfile.js里面有下面一行代码：

// gulp.task('sources', gulp.series('html', gulp.parallel('js', 'css', 'image')));

我解释一下，意思是先执行压缩html的命令，再一起执行压缩js，css和image的命令，由于我使用了gulp-rev和gulp-rev-collector两个插件来给css和js添加md5后缀，需要替换html中css和js的url，所以压缩html的任务应该放到最后面执行，要不然你会发现压缩后的html中的url并没有被替换，命令书写如下：

gulp.task('sources', gulp.series('js', 'css', 'image', 'html'));

然后在package.json里面编写npm运行脚本：

 "scripts": { "start": "set NODE_ENV=dev&&gulp dev", "build": "set NODE_ENV=prod&&gulp clean && gulp build", "serve": "http-server dist/static -p 3000" },

set NODE_ENV=dev&&gulp dev表示设置环境变量为dev，并且运行gulp dev命令其中dev表示开发环境，我们在cmd中执行npm run start 就可以走这条命令

set NODE_ENV=prod&&gulp clean && gulp build表示设置环境变量为prod，并且运行gulp clean和gulp build命令，我们在cmd中执行npm run build 就可以走这条命令

特别注意：NODE_ENV=dev&&gulp dev后面不能留空格，这是一个坑，导致我运行npm run start时老是报错，找了好久才发现是这个问题NODE_ENV=dev&&gulp dev，所以一定要记住&&符号一定要和NODE_ENV=dev挨着

为啥要设置环境变量，因为要在gulpfile.js里面判断是开发还是生成环境，然后再执行相应的gulp命令，比如下面的代码：

// 根据环境引入不同的配置文件let buildConfig;if(process.env.NODE_ENV === 'dev') { buildConfig = require('./build/gulp.dev'); gulp.task('server', buildConfig.server); // 起一个本地服务器} else { buildConfig = require('./build/gulp.prod'); gulp.task('clean', buildConfig.clean); // 清理目录}

process.env 它是node的一个方法，它是一个对象，这个对象里存放了当前node命令运行时的环境数据，通过process.env.NODE_ENV就可以拿到set NODE_ENV=dev的结果，所以运行如下命令：

npm run start // 启动本地服务，可以愉快的开发项目了
npm run build // 开发完毕，打包你的项目

References

[1] JS-Web-Skill: https://github.com/darenone/JS-Web-Skill.git
[2] zongqiang-bookmarks: https://darenone.github.io/zongqiang-bookmarks/
[3] package.json: https://github.com/darenone/JS-Web-Skill/blob/master/package.json
[4] JS-Web-Skill: https://github.com/darenone/JS-Web-Skill.git
[5] README.md: https://github.com/darenone/JS-Web-Skill/blob/master/README.md

vlambda博客
学习文章列表