Gulp初识
Gulp是什么家伙？
Gulp只是一个”工具“，基于NodeJs，自动化任务运行器。现常称”前端构建工具“。
说起”构建工具“，最早是C语言中Make，Java中的Ant（只要项目中某个文件有变化，就重新构建项目）
由于其强大的自动化构建和部署，2013年02月，前端第一个基于NodeJs的构建工具——Grunt v0.4.0 发布。
紧接着，第二年发布了一个新的构建系统Gulp，希望能够取其精华，并取代Grunt，成为最流行的JavaScript任务运行器。
Gulp和Grunt的异同点
易用—Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
高效—Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
高质量—Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
易学—Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
grunt的使用
ps：这是portal项目下的grunt配置文件
module.exports = function(grunt){
grunt.initConfig({
pkg : grunt.file.readJSON("package.json"),
concat:{
r2:{
src: ['src/main/webapp/src/js/lib/jquery.js','src/main/webapp/src/js/lib/jquery.cookie.js','src/main/webapp/src/js/lib/jquery.freeCarousel.js','src/main/webapp/src/js/lib/jquery.lazyload.min.js','src/main/webapp/src/js/lib/dialog-min.js','src/main/webapp/src/js/lib/dialog-plus-min.js','src/main/webapp/src/js/lib/nprogress.js'],
dest: 'src/main/webapp/src/js/lib/r2.js'
}
},
uglify : {
options : {
banner : '/*! <%= pkg.name %> author:<%= pkg.author %> <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
},
/* lib */
r2:{
files : {
'src/main/webapp/dist/js/lib/r2.js' : ['src/main/webapp/src/js/lib/r2.js']
}
},
common:{
files:{
'src/main/webapp/dist/js/common.v2.js' : ['src/main/webapp/src/js/common.v2.js']
}
},
product:{
files:{
'src/main/webapp/dist/js/product.v2.js' : ['src/main/webapp/src/js/product.v2.js']
}
},
blog:{
files:{
'src/main/webapp/dist/js/blog.v2.js' : ['src/main/webapp/src/js/blog.v2.js','src/main/webapp/src/js/ydhShare.v2.js']
}
}
},
/*css*/
less:{
app: {
files: {
"src/main/webapp/src/css/c.css": ["src/main/webapp/src/css/c.less"]
}
}
},
cssmin: {
options: {
keepSpecialComments : 0,
banner : '/*! <%= pkg.name %> minified css file author:<%= pkg.author %> <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
},
app2 :{
files:{
'src/main/webapp/dist/css/c.v2.css':["src/main/webapp/src/css/common.v2.css","src/main/webapp/src/css/page.v2.css","src/main/webapp/src/css/ui-dialog.css","src/main/webapp/src/css/jiathis_share.v2.css","src/main/webapp/src/css/jiathis_counter.v2.css","src/main/webapp/src/css/nprogress.css"]
}
},
index : {
files: {
"src/main/webapp/dist/css/index.v2.css": ["src/main/webapp/src/css/index.v2.css"]
}
},
buy : {
files: {
"src/main/webapp/dist/css/buy.v2.css": ["src/main/webapp/src/css/buy.v2.css"]
}
},
help : {
files: {
'src/main/webapp/dist/css/help.v2.css': ['src/main/webapp/src/css/help.v2.css']
}
}
},
imagemin: {
/* 压缩图片大小 */
dist: {
files: [{
expand: true,
cwd: "src/main/webapp/src",
src: ["**/*.{jpg,png,gif}"],
dest: "src/main/webapp/dist"
}]
}
},
watch : {
/*lib*/
lib_common : {
files: "src/main/webapp/src/js/common.v2.js",
tasks:['uglify:common']
},
lib_app2 : {
files: ["src/main/webapp/src/css/common.v2.css","src/main/webapp/src/css/page.v2.css","src/main/webapp/src/css/ui-dialog.css","src/main/webapp/src/css/jiathis_share.v2.css","src/main/webapp/src/css/jiathis_counter.v2.css"],
tasks:['cssmin:app2']
},
lib_index:{
files:"src/main/webapp/src/css/index.v2.css",
tasks:['cssmin:index']
}
}
});
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-imagemin");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.registerTask('default', ['watch']);
};
Gulp的使用
ps：写的一个demo
/**
* 组件安装
* npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
*/
// 引入 gulp及组件
var gulp = require('gulp'), //基础库
imagemin = require('gulp-imagemin'), //图片压缩
minifycss = require('gulp-minify-css'), //css压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //合并文件
clean = require('gulp-clean') //清空文件夹
// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/main/webapp/*.html',
htmlDst = './src/main/webapp/';
gulp.src(htmlSrc)
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});
// 样式处理
gulp.task('css', function () {
var cssSrc = './src/main/webapp/src/css/*.css',
cssDst = './src/main/webapp/dist/css';
gulp.src(cssSrc)
//.pipe(sass({ style: 'expanded'}))
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});
// 图片处理
gulp.task('images', function(){
var imgSrc = './src/main/webapp/src/img/**/*',
imgDst = './src/main/webapp/dist/img';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})
// js处理
gulp.task('js', function () {
var jsSrc = './src/main/webapp/src/js/*.js',
jsDst ='./src/main/webapp/dist/js';
gulp.src(jsSrc)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});
// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['./src/main/webapp/dist/css', './src/main/webapp/dist/js', './src/main/webapp/dist/img'], {read: false})
.pipe(clean());
});
// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});
// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
server.listen(port, function(err){
if (err) {
return console.log(err);
}
// 监听html
gulp.watch('./src/main/webapp/*.html', function(event){
gulp.run('html');
})
// 监听css
gulp.watch('./src/main/webapp/src/css/*.css', function(){
gulp.run('css');
});
// 监听images
gulp.watch('./src/main/webapp/src/img/**/*', function(){
gulp.run('images');
});
// 监听js
gulp.watch('./src/main/webapp/src/js/*.js', function(){
gulp.run('js');
});
});
});
差异和不同
流：Gulp是一个基于流的构建系统，使用代码优于配置的策略。
插件：Gulp的插件更纯粹，单一的功能，并坚持一个插件只做一件事。
代码优于配置：维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。
没有产生中间文件
I/O流程的不同
使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。
而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
Gulp的API
gulp.task
gulp.run
gulp.watch
gulp.src
gulp.dest
gulp.task
Gulp.js的使用和插件的开发都很简单，当然里面还有很多细节，抛砖引玉，具体请看Gulp.js的官方文档。
浙公网安备 33010602011771号