gulp
gulp简介
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css/jsp 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。
入门
安装gulp
1.安装node.js
gulp是基于nodejs的,必须安装nodejs。windows直接去官网下载安装即可。
2.安装gulp
全局安装
打开命令行窗口,执行命令 npm install -g gulp
局部安装
命令行进入项目目录,执行命令 npm install –save-dev gulp
npm是nodejs的包管理器,管理插件的安装、卸载、升级等。
我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
3.使用taobao镜像
使用npm安装node插件,连接国外网站有时会因为网络问题而安装失败。我们可以npm的淘宝镜像,每10分钟同步与官方同步一次
npm config set registry http://registry.npm.taobao.org/
运行gulp
1.创建package.json
package.json是nodejs配置文件。可以按照格式手动创建。也可以在项目目录中执行命令npm init 按照提示一步一步输入创建。
2.创建gulpfile.js
gulpfile.js是gulp项目的gulp配置文件,手动创建即可。
简单示例:
var gulp = require('gulp');
gulp.task('default',function(){
});
3.运行gulp
在项目目录执行命令gulp
4.插件下载及使用
在项目目录使用npm命令下载,如下载合并文件的插件gulp-concat:
npm install –save-dev gulp-concat
使用时如下:
在gulpfile.js中添加 var concat = require(‘gulp-concat’);
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('default',function(){
gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
`````
<div class="se-preview-section-delimiter"></div>
## demo示例
**注:gulp生成了新的目标文件,与源文件进行了隔离**
1.css文件添加md5后缀
<div class="se-preview-section-delimiter"></div>
```javascript
var gulp = require('gulp');
var rev = require('gulp-rev');//生成md5后缀
var notify = require('gulp-notify');
gulp.task('css',function(){//css处理
gulp.src('src/main/webapp/static/css/*.css')//加载匹配的文件获取流
.pipe(rev())//文件名称家md5后缀
.pipe(gulp.dest('src/main/webapp/dest/css'))//输出目录
.pipe(rev.manifest({//将文件名称后缀一json形式保存
merge:true
}))
.pipe(gulp.dest('src/main/webapp/dest/rev/css'))//json文件目录
.pipe(notify({
message:'css done !' //通知执行结果
}))
;
});
gulp.task("default", ['css']);
在项目目录,执行gulp 或者 gulp css
2.合并及压缩css
gulp.task('cssmin',function(){//合并css
gulp.src('src/main/webapp/static/css/merge/*.css')
.pipe(concat('merge.css'))//合并文件名称
.pipe(cssmin())//压缩
.pipe(rev())//添加md5后缀
.pipe(gulp.dest('src/main/webapp/dest/css'))//输出处理后文件
.pipe(rev.manifest({//将文件信息已json形式保存至rev-manifest.json
merge:true
}))
.pipe(gulp.dest('src/main/webapp/dest/rev/merge'))//json文件输出目录
.pipe(notify({
message:'merge done !'
}))
;
});
3.替换
gulp.task('cssmin',function(){//合并css
gulp.src('src/main/webapp/static/css/merge/*.css')
.pipe(concat('merge.css'))//合并文件名称
.pipe(cssmin())//压缩
.pipe(rev())//添加md5后缀
.pipe(gulp.dest('src/main/webapp/dest/css'))//输出处理后文件
.pipe(rev.manifest({//将文件信息已json形式保存至rev-manifest.json
merge:true
}))
.pipe(gulp.dest('src/main/webapp/dest/rev/merge'))//json文件输出目录
.pipe(notify({
message:'merge done !'
}))
;
});```
4.使用外部文件
```javascript
var config = require('./src/main/webapp/config/config.json');//引用外部配置文件
//处理css或者js文件
function doStuff(src,dest){
return gulp.src(src)
.pipe(rev())
.pipe(gulp.dest(dest))
.pipe(rev.manifest({
merge:true
}))
.pipe(gulp.dest(dest))
.pipe(notify({
message:'doStuff done !'
}))
;
}
//处理jsp
function doJsp(manifest,src,dest){
return gulp.src([manifest+'/*.json',src])
.pipe(revCollector({
replaceReved:false,
dirReplacements: {
'static/css': '../css'
}
}))
.pipe(gulp.dest(dest))
.pipe(notify({
message:'doJsp done !'
}))
;
}
gulp.task('appcss',function(){
return doStuff(config.app.cssSrc,config.app.cssDest);
});
gulp.task('appreplace',['appcss'],function(){
return doJsp(config.app.cssDest,config.app.jspSrc,config.app.jspDest);
});
<div class="se-preview-section-delimiter"></div>
5.按顺序执行任务
var runSequence = require('run-sequence');//task顺序执行
gulp.task('build',function(done){
runSequence(
['js'],
['css'],
['cssmin'],
['replace'],
done
);
});