一直以来工作中都没有用到过gulp，所以一直没花时间去看，前段时间做公司年会项目的时候，因为是微信端的网页应用，需要在手机上运行，但是手机的缓存会导致每次修改的代码没有生效，于是每次修改了css和js都要重新修改对应的css和js的版本号，特别麻烦，于是开始学习gulp，网上与gulp相关的文章写的都不太清楚，所以一直看不明白。综合自己看到的几篇文章，结合自己的理解之后，重新写了一篇，希望对大家有所帮助，文章中有不正确的地方，欢迎批评指正！
1、安装nodejs；
2、新建package.json文件；
3、全局和本地安装gulp；
4、安装gulp插件；
5、新建gulpfile.js文件；
6、通过命令提示符运行gulp任务。
一、安装nodejs
https://nodejs.org/en/选择对应的版本下载
二、使用命令行
node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；
npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器
cd定位到目录，用法：cd + 路径；
dir列出文件列表；
cls清空命令提示符窗口内容
新建项目工程gulp_web(可以自定义其他名称)，原文件夹的名称为assets
压缩后的文件夹的名称为build
在命令行打开gulp_web文件夹所在的路径，执行下图所示操作
三、全局安装gulp
1、说明：全局安装gulp目的是为了通过她执行gulp任务；
2、安装：命令提示符执行cnpm install gulp -g；(npm安装有问题可以换成cnpm,cnpm安装过程自行百度)
3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
安装gulp的时候，可能会提示gulp安装失败，如图所示，遇到这个问题，可能是node的版本过低，重新安装下node的最新版本
四、新建package.json文件
1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
2、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：
{
"name":"test", //项目名称（必须）
"version":"1.0.0", //项目版本（必须）
"description":"This is for study gulp project !", //项目描述（必须）
"homepage":"", //项目主页
"repository":{ //项目资源库
"type":"git",
"url":"https://git.oschina.net/xxxx"
},
"author":{ //项目作者信息
"name":"surging",
"email":"surging2@qq.com"
},
"license":"ISC", //项目许可协议
"devDependencies":{ //项目依赖的插件
"gulp":"^3.8.11",
"gulp-less":"^3.0.0"
}
}
3、当然我们可以手动新建这个配置文件，命令提示符执行cnpm init
五、本地安装gulp插件
接着开始本地安装gulp各种插件，在这里找你需要的插件。有四个是用得最多的，必备的
1、语法检查 （gulp-jshint）
2、合并文件 （gulp-concat）
3、压缩代码 （gulp-uglify）
4、文件重命名 （gulp-rename）
常用插件安装步骤：
本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev；
为了能正常使用，我们还得本地安装gulp
cnpm install gulp --save-dev；
cnpm install gulp-sass --save-dev；
cnpm install gulp-concat --save-dev；多个文件合并为一个
cnpm install gulp-minify-css --save-dev；将CSS压缩处理成一行（以前的写法）
cnpm install gulp-clean-css --save-dev；将CSS压缩处理成一行（现在常用gulp-clean-css）
cnpm install gulp-uglify --save-dev；生产环境下将JS压缩处理成一行
cnpm install gulp-sourcemaps --save-dev；
cnpm install gulp-smushit --save-dev；图片压缩
npm install gulp-rev --save-dev；对文件名加MD5后缀
cnpm install gulp-rev-collector --save-dev；路径替换
cnpm install run-sequence --save-dev；
cnpm install del --save-dev；
安装过程如下图
--save-dev 是可以省掉你手动修改package.json文件的步骤，正常情况下得连同版本号手动将他们添加到模块配置文件package.json中的依赖里
安装成功后的插件在package.json文件的devDependencies中可以看到，如下图
PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
更改gulp-rev和gulp-rev-collector(重要)
1.打开node_modules\gulp-rev\index.js
第135行: manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打开node_modules\rev-path\nodemodules\rev-path\index.js
第9行:return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
更新为: returnmodifyFilename(pth, (filename, ext) =>`${filename}${ext}`);
3.打开node_modules\gulp-rev-collector\index.js
第40行: var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
更新为: var cleanReplacement =path.basename(json[key]).split('?')[0];
安装配置完成，要开始写代码啦。
六、新建gulpfile.js文件（非常重要）
在项目目录gulp_web下新建gulpfile.js文件，gulp有五种方法：task，run，watch，src，和dest.
说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）
它的内容大致是这样的，如下：
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var cssminify = require('gulp-minify-css');// 压缩CSS
var uglify = require('gulp-uglify');// 生产环境下压缩JS
var smushit = require('gulp-smushit');// 图片压缩
var rev = require('gulp-rev');// 对文件名加MD5后缀(版本号)
var revCollector = require('gulp-rev-collector');// 路径替换
var runSequence = require('run-sequence');
var del = require('del');
// 创建一个名为css的任务
gulp.task('css',function(){
return gulp.src('./asset/css/*.css')// 该任务针对的css文件
.pipe(cssminify())// 将css压缩处理成一行
.pipe(rev())// 文件名加MD5后缀
.pipe(gulp.dest('./build/css'))// 生成到根目录build文件夹下
.pipe(rev.manifest())// 生成一个rev-manifest.json
.pipe(gulp.dest('./rev/revcss'));// 将rev-manifest.json保存到revcss目录内
});
// 创建一个名为script的任务
gulp.task('script',function(){
return gulp.src('./asset/scripts/app/*.js')// 获取全部的js文件
.pipe(uglify())// 生产环境下将JS压缩处理成一行
.pipe(rev())// 文件名加MD5后缀
.pipe(gulp.dest('./build/scripts/app'))// 生成到根目录build文件夹下
.pipe(rev.manifest())// 生成一个rev-manifest.json
.pipe(gulp.dest('./rev/revjs'));// 将rev-manifest.json保存到revjs目录内
});
gulp.task('revHtml',function () {
return gulp.src(['./rev/**/*.json','./asset/view/*.html'])// 读取rev-manifest.json文件以及需要进行css名替换的文件
.pipe(revCollector())// 执行文件内css名和js名的替换
.pipe(gulp.dest('./build/view'));// 替换后的文件输出的目录,Html更换css、js文件版本
});
// 在样式文件中修改的内容一旦保存可以直接在显示器显示渲染效果，无需刷新浏览器，这就是watch的功能。
gulp.task('watch',function () {
gulp.watch(['./asset/css/*.css'], ['css']);
gulp.watch(['./asset/scripts/app/*.js'], ['script']);
gulp.watch(['./rev/**/*.json','./asset/view/*.html'], ['revHtml']);
});
gulp.task('dev',function (done) {
condition =false;
runSequence(
['css'],
['script'],
['revHtml'],
['watch'],
done);
});
// 执行命令gulp clean
gulp.task('clean',function (cb) {
del([
// 这里我们使用一个通配模式来匹配 文件夹中的所有东西
'./build/css/*',
'./build/scripts/app/*',
'./build/view/*'
], cb);
});
// 执行命令gulp
gulp.task('default', ['dev']);
完成以上配置，现在开始写你的代码啦！代码写完再执行下面的七。
七、运行gulp
1、说明：命令提示符执行gulp 任务名称；
2、gulp clean 清空生成的文件
3、当执行gulp default或gulp将会调用default任务里的所有任务
八、使用webstorm运行gulp任务或者命令提示符执行gulp
1、说明：使用webstorm可视化运行gulp任务；
2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。
踩过的坑：
来谈谈我遇到的一点小小的坑。
代码敲完，需要回到命令行，运行gulp。直接输入gulp，就开始运行，期间会报一些error，不要紧张，指的是js文件里一些语法错误，无伤大雅，成功创建出压缩文件才是最终目的。
那么如果需要修改代码，必须一直把cmd控制台保持打开状态，否则无法执行watch操作。第一点坑，就是编辑器的自动保存功能，一行代码如果写的不顺，或是中途打岔，比如‘$scope.’，还没接着写完，编辑器自动保存的功能会使jshint检查出语法错误，导致gulp的停止运行。
如果用的是webstrom编辑器的，可以不用每次打开命令行，右键选中gulpfile.js，show gulp tasks，再点击default即可。
操作过程中，我遇到的第二个坑就是安装gulp插件。由于我的电脑以前就安装过node，所以没有重新安装，导致运行cnpm install gulp --save-dev的时候，一直安装gulp报错，后来重新安装了最新版的node之后，再运行cnpm install gulp --save-dev就可以成功安装gulp了。
遇到的第三个坑就是添加版本号，找了好几篇文章都说的不清楚，研究了好久才成功，以上我的代码是经过自己验证过才贴上去的，可以达到当修改asset里面的css和js，同步改变build里面的css和js的目的，同时会使得html里面的版本号发生改变，可解决缓存问题。
网友评论