一、什么是gulp
gulp
是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。例如:css
、js
的合并与压缩(减少http
请求,缩小文件大小)、html
压缩、md5
名生成与替换(一般解决浏览器缓存)、线上配置文件自动替换、搭建本地web
服务器做到实时刷新等。
二、环境搭建
gulp
是基于Node.js
的插件工具
1. 搭建Node.js环境:https://nodejs.org/en/download/ 下载相应系统的node安装包。
进入终端:键入node -v
如果出现node
版本号,则node.js
安装成功。
2. 安装gulp:
(1)安装全局gulp:终端键入npm install gulp -g
等待完成;
(2)cd
进入到项目根目录 –>:终端键入npm init
【生成node.js插件管理json文件:package.json】
如图:
【注:如图红色箭头、一路enter即可(每一项的意义都很明确,无需解释!我只是提一下license选项,这一项是开源协议:通常的开源协议有:GPL、Apache License、 BSD、ISC.. 等等,有兴趣的可以参考:开源协议】
(3)键入:npm install gulp –save-dev
安装gulp
到当前目录,等待安装完成。键入gulp-v
出现全局版本,和当前版本,安装完成。
如图:
键入:gulp,出现:“No gulpfile fount”,说明前三步执行成功。
(4)从上面提示可以看出,运行gulp
需要gulpfile
文件。
故而:在当前文件夹新建文件:gulpfile.js
备用。
三、gulpfile.js文件编写(重点)
在gulpfile.js
中写入:
var gulp = require("gulp"); //申明gulp变量
gulp.task("start",function(){
console.log("痞子猫**************");
});
终端键入:gulp start
执行gulp
中的start
任务,出现打印,说明gulpfile.js
编写没什么问题!
如图:
下面开始进入正题,
压缩、合并等这些操作可以依靠gulp
插件完成:插件安装命令:npm install [module] –save-dev
;
如:npm install gulp-concat –save-dev
这是安装合并插件。
使用如下:
var gulp = require("gulp"); //申明gulp变量
var concat = require('gulp-concat'); // require:加载插件,参数为:插件名
//合并任务
gulp.task("concat",function(){ //concat为任务名,运行gulp concat执行此任务。
return gulp.src("./js/*.js") //需要合并的js目录,支持正则
.pipe(concat("all.js")) //concat(),合并操作,参数:合并后的名字
.pipe(gulp.dest("./js/")) //合并后放入的目录
});
终端键入:gulp concat 执行此任务。
这就是一个简单的合并任务,前面提到了node是基于流,也就是管道操作的。gulp.src()管道的入口,pipe()获得处理管道中的数据,pipe(gulp.dest())处理后数据的出口。说别了就是一个流水线操作。
所有的gulp插件运用也就是这个套路了:常用插件集合:
1.gulp-sass(sass编译)
2.gulp-compass(sass编译)
3.gulp-autoprefixer(添加CSS3前缀)
4.gulp-clean-css(压缩CSS)
5.gulp-include(文件包含)
6.gulp-concat(文件合并)
7.del(文件删除)
8.gulp-uglify(压缩js)
9.gulp.spritesmith(合成雪碧图)
10.run-sequence(队列执行)
11.browser-sync(浏览器同步刷新)
12.gulp-babel(js编译)
13.gulp-imagemin(图片压缩)
gulp-imageisux(腾讯智图压缩,慎用)
imagemin-jpegtran(jpg图片压缩)
imagemin-pngquant(png图片压缩)
gulp-image-resize(图片大小调整)
14.gulp-rename(重命名)
15.gulp-live-server(轻量服务器)
16.gulp-livereload
17.gulp-util(工具集)
18.require-dir(引入整个文件夹文件)
19.connect-livereload(热更新同步)
20.gulp-if(是否运行插件)
21.gulp-plumber
22.gulp-eslint(eslint代码检查)
23.gulp-htmlmin(html压缩)
24.gulp-clean(删除文件/文件夹)
25.gulp-less
26.gulp-load-plugins(加载gulp插件)
再次强调安装插件命令:npm install [module] –save-dev
del:描述:删除:
var del = require('del');
del('./dist'); // 删除整个dist文件夹
gulp-rename:描述:重命名文件。
var rename = require("gulp-rename");
gulp.src('./hello.txt')
.pipe(rename('gb/goodbye.md')) // 直接修改文件名和路径
.pipe(gulp.dest('./dist'));
gulp.src('./hello.txt')
.pipe(rename({
dirname: "text", // 路径名
basename: "goodbye", // 主文件名
prefix: "pre-", // 前缀
suffix: "-min", // 后缀
extname: ".html" // 扩展名
}))
.pipe(gulp.dest('./dist'));
gulp-filter:描述:在虚拟文件流中过滤文件。
var filter = require('gulp-filter');
const f = filter(['**', '!*/index.js']);
gulp.src('js/**/*.js')
.pipe(f) // 过滤掉index.js这个文件
.pipe(gulp.dest('dist'));
const f1 = filter(['**', '!*/index.js'], {restore: true});
gulp.src('js/**/*.js')
.pipe(f1) // 过滤掉index.js这个文件
.pipe(uglify()) // 对其他文件进行压缩
.pipe(f1.restore) // 返回到未过滤执行的所有文件
.pipe(gulp.dest('dist')); // 再对所有文件操作,包括index.js
gulp-uglify:描述:压缩js文件大小。
var uglify = require("gulp-uglify");
gulp.src('./hello.js')
.pipe(uglify()) // 直接压缩hello.js
.pipe(gulp.dest('./dist'))
gulp.src('./hello.js')
.pipe(uglify({
mangle: true, // 是否修改变量名,默认为 true
compress: true, // 是否完全压缩,默认为 true
preserveComments: 'all' // 保留所有注释
}))
.pipe(gulp.dest('./dist'))
gulp-csso:描述:压缩优化css。
var csso = require('gulp-csso');
gulp.src('./css/*.css')
.pipe(csso())
.pipe(gulp.dest('./dist/css'))
gulp-html-minify:描述:压缩HTML。
var htmlminify = require('gulp-html-minify');
gulp.src('index.html')
.pipe(htmlminify())
.pipe(gulp.dest('./dist'))
gulp-imagemin:描述:压缩图片。
var imagemin = require('gulp-imagemin');
gulp.src('./img/*.{jpg,png,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'))
gulp-autoprefixer:描述:自动为css添加浏览器前缀。
var autoprefixer = require('gulp-autoprefixer');
gulp.src('./css/*.css')
.pipe(autoprefixer()) // 直接添加前缀
.pipe(gulp.dest('dist'))
gulp.src('./css/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'], // 浏览器版本
cascade:true // 美化属性,默认true
add: true // 是否添加前缀,默认true
remove: true // 删除过时前缀,默认true
flexbox: true // 为flexbox属性添加前缀,默认true
}))
.pipe(gulp.dest('./dist'))
想了解那个插件的参数、使用方法等,直接上https://www.npmjs.com/
注意事项:
src
入口匹配说明:
- app.js 精确匹配
- *.js 能匹配js后缀的文件
- */.js 能匹配多级目录下的js文件(也包含当前目录下)
- !js/app.js 精确排除
return说明
不加
return
返回,默认异步执行;加上return
意思很明确,就是等待流处理结束~可做同步处理任务条件
默认任务说明
只要任务名字为
default
,当运行gulp
时是可省略任务名执行,直接键入:gulp
任务依赖说明
gulp.task("task1",function(){
//
});
gulp.task("task2",["task1"],function(){
//
});
- 如上代码:task2依赖于task1,也就是说等待task1任务结束后再执行
同步执行说明
gulp
默认全部任务为异步执行,其实在实际场景很多需要同步操作:如:拷贝-压缩操作,必须拷贝完成才能压缩。故而推荐一种简单的方法处理同步问题:使用插件:
gulp-sequence
var gulp = require("gulp"); //申明gulp变量
var gulpSequence = require('gulp-sequence'); //同步执行模块
gulp.task("task1",function(){
return xxx //具体任务
});
gulp.task("task2",function(){
return xxx //具体任务
});
gulp.task("task3",function(){
return xxx //具体任务
});
//这样可保证,task1-》task2-》task3的执行顺序,任务必须return,已解释原因
gulp.task("default",function(callback){
gulpSequence("task1","task2","task3",callback);
});
你不想看这么多!那也简单~
- 1、安装node
- 2、执行 npm install gulp -g
- 3、复制下面代码到:package.json(新建)
{
"name": "guandn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"dependencies": {
"gulp": "^3.9.1"
},
"devDependencies": {
"del": "^3.0.0",
"gulp-concat": "^2.6.1",
"gulp-html-minify": "0.0.14",
"gulp-htmlmin": "^4.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-rev": "^8.1.1",
"gulp-rev-collector": "^1.2.4",
"gulp-sequence": "^1.0.0",
"gulp-smushit": "^1.2.0",
"gulp-uglify": "^3.0.0",
"gulp-useref": "^3.1.4",
"merge-stream": "^1.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitee.com/quzhuanpanDesigner/guandn.git"
},
"author": "broom",
"license": "ISC"
}
- 4、执行:npm install 【根据package.json安装插件】
- 5、复制下面代码到:gulpfile.js(新建)
var gulp = require("gulp"); //申明gulp变量
var del = require('del'); //删除模块
var fs = require("fs"); //文件操作模块
var concat = require('gulp-concat'); // 拼接工具
var uglify = require('gulp-uglify'); // 压缩js工具
var minifyCss = require('gulp-minify-css'); // 压缩css工具
var miniHtml = require("gulp-html-minify"); //压缩html/jsp
var smushit = require('gulp-smushit'); //无损压缩jpg、png图片
var rev = require('gulp-rev'); // 加md5后缀的工具
var revCollector = require('gulp-rev-collector'); //与rev共同使用
var useref = require('gulp-useref'); // 替换文件中的链接的工具,一般与gulp-rev共同使用
var gulpSequence = require('gulp-sequence'); //同步执行模块
var mergeStream = require("merge-stream"); //合并多个stream
//资源配置
var config={
dist:"./dist/guandn/", //目标目录
target:'./target/guandn/', //资源
}
//MD5地图json地址
var revJsonConfig = {
js:'./rev/rev-manifest-js.json',
css:'./rev/rev-manifest-css.json',
base:'./rev/'
}
//js压缩参数
var uglifyConfig = {
mangle: false,//类型:Boolean 默认:true 是否修改变量名
compress: true,//类型:Boolean 默认:true 是否完全压缩
}
var Util = {
fetchScripts: function (readFile, basePath) { //文件操作工具,取得需要合并的js
var sources = fs.readFileSync(readFile);
sources = /\[([^\]]+\.js'[^\]]+)\]/.exec(sources);
sources = sources[1].replace(/\/\/.*\n/g, '\n').replace(/'|"|\n|\t|\s/g, '');
sources = sources.split(",");
console.log("搜索js合并地址:读取文件: "+readFile);
sources.forEach(function (filepath, index) {
sources[ index ] = basePath + filepath;
console.log("地址:" + basePath + filepath);
});
return sources;
},
fetchStyles: function (readFile, basePath) { //文件操作工具,取得需要合并的css
var sources = fs.readFileSync(readFile),
filepath = null,
pattern = /@import\s+([^;]+)*;/g,
src = [];
console.log("搜索css合并地址:读取文件: "+readFile);
while (filepath = pattern.exec(sources)) {
src.push(basePath + filepath[ 1 ].replace(/'|"/g, ""));
console.log("地址:" + basePath + filepath[ 1 ].replace(/'|"/g, ""));
}
return src;
}
};
gulp.task("copy",function(){
console.log("拷贝代码到dist************************")
return gulp.src(config.target+"/**/*").
pipe(gulp.dest(config.dist));
});
gulp.task("del",function(){
console.log("删除dist、rev目录************************")
return del([config.dist,revJsonConfig.base]);
});
//合并任务
gulp.task("combine",function(){
console.log("合并任务开始************************")
var commonJs = Util.fetchScripts(config.dist+"media/common.app.js", config.dist+"media/");
var commJsStream = gulp.src(commonJs)
.pipe(concat("common.app.js"))
.pipe(uglify()) //压缩
.pipe(rev()) //加名字MD5
.pipe(gulp.dest(config.dist+"media/")) //保存
.pipe(rev.manifest({ //生成MD5地图
path: revJsonConfig.js,
merge: true
}))
.pipe(gulp.dest("./"));
var commonCss = Util.fetchStyles(config.dist + "media/common.app.css", config.dist + "media/");
var commCssStream = gulp.src(commonCss)
.pipe(concat("common.app.css"))
.pipe(minifyCss())
.pipe(rev())
.pipe(gulp.dest(config.dist+"media/"))
.pipe(rev.manifest({
path: revJsonConfig.css,
merge: true
}))
.pipe(gulp.dest("./"));
var pluginsJs = Util.fetchScripts(config.dist+"media/plugins/plugin.common.app.js", config.dist+"media/plugins/");
var pluginJsStream = gulp.src(pluginsJs)
.pipe(concat("plugin.common.app.js"))
.pipe(uglify())
//.pipe($.rev())
.pipe(gulp.dest(config.dist+"media/plugins/"))
//.pipe($.rev.manifest({
// path: revJsonConfig.js,
// merge: true
//}))
//.pipe(gulp.dest("./"));
var pluginCss = Util.fetchStyles(config.dist + "media/plugins/plugin.common.app.css", config.dist+"media/plugins/");
var pluginCssStream = gulp.src(pluginCss)
.pipe(concat("plugin.common.app.css"))
.pipe(minifyCss())
//.pipe($.rev())
.pipe(gulp.dest(config.dist+"media/plugins/"))
//.pipe($.rev.manifest({
// path: revJsonConfig.css,
// merge: true
//}))
//.pipe(gulp.dest("./"));
//合并编辑器
var guandnEditor = Util.fetchScripts(
config.dist+"media/plugins/guandnEditor/editor.commbine.min.js",
config.dist+"media/plugins/"
);
var editor = gulp.src(guandnEditor)
.pipe(concat("editor.commbine.min.js"))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(config.dist+"media/plugins/guandnEditor/"))
.pipe(rev.manifest({
path: revJsonConfig.js,
merge: true
}))
.pipe(gulp.dest("./"));
//合并上传插件
var guanzhi = Util.fetchScripts(
config.dist+"media/plugins/jQuery-File-Upload-master/js/jquery.fileuplaod.all.min.js",
config.dist+"media/plugins/"
)
var guanzhiFileUulpad = gulp.src(guanzhi)
.pipe(concat("jquery.fileuplaod.all.min.js"))
.pipe(uglify(uglifyConfig))
.pipe(gulp.dest(config.dist+"media/plugins/jQuery-File-Upload-master/js/"))
return mergeStream(commJsStream,commCssStream,pluginJsStream,pluginCssStream,editor,guanzhiFileUulpad);
});
//压缩js,css
gulp.task("compress",function(callback){
console.log("压缩任务开始***************************")
var compressCss = gulp.src([config.dist+"media/**/*.css","!**/*.min.css","!**/plugins/**/*"])
.pipe(minifyCss())
.pipe(gulp.dest(config.dist+"media/"));
var compressJs = gulp.src([config.dist+"media/**/*.js","!**/*.min.js","!**/plugins/**/*"])
.pipe(uglify(uglifyConfig))
.pipe(gulp.dest(config.dist+"media/"));
return mergeStream(compressCss, compressJs);
});
//静态文件替换
gulp.task("replaceJC", function(){
console.log("替换静态文件**************************");
var revJson = revJsonConfig.base+"**/*.json";
var commonCss = gulp.src([revJson, config.dist+"media/css/common/*.jsp"])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(config.dist+"media/css/common/"));
var commonJs = gulp.src([revJson, config.dist+"media/js/common/*.jsp"])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(config.dist+"media/js/common/"));
var editor = gulp.src([revJson, config.dist+"WEB-INF/pages/**/*.jsp"])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(config.dist+"WEB-INF/pages/"));
return mergeStream(commonCss, commonJs);
});
//可异步执行操作【最后操作】
gulp.task("asyn", function(){
console.log("压缩jsp、拷贝配置**********************************")
// gulp.src(config.dist+"WEB-INF/pages/**/*.jsp")
// .pipe(miniHtml({
// empty: true //删除空格
// }))
// .pipe(gulp.dest(config.dist + "WEB-INF/pages/"));
//图片压缩(费时操作)
// gulp.src(config.dist+'media/img/**/*')
// .pipe(smushit({
// verbose: true
// }))
// .pipe(gulp.dest(config.dist+'media/img/'));
});
gulp.task("finishedDel",function(){
return del([revJsonConfig.base]);
});
gulp.task("default",function(callback){
gulpSequence("del","copy","combine","compress","replaceJC","finishedDel","asyn",callback);
});
- 6、修改gulpfile中的路径,文件等
网友评论