gulp应用学习

相交于grunt,gulp的呼声渐高，更受前端的欢迎

一 、gulp 与 gunt相比的优势

易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。

高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。

高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。

易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。

　　易用

Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。

　　高效

Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。

　　高质量

Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的

imagemin

插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。

　　易学

Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。

　　

　　二、gulp安装

　　　（一）gulp下载　

　　npm install -g gulp    //安装失败的小伙伴请试 sudo npm install gulp -g

　　 局部安装在你的项目

　　npm install --save-dev gulp

　　两种安装方式随意

　　 (2) 运行

　　 在目录下创建一个"gulpfile.js"文件,通过gulp命令运行即可.

　　 (3) 编写gulpfile.js文件

　　　　

三、gulpfile.js常用写法

　　　　

var gulp = require('gulp');

// 引入组件
var less = require('gulp-less'),            // less
minifycss = require('gulp-minify-css'), // CSS压缩
uglify = require('gulp-uglify'),        // js压缩
concat = require('gulp-concat'),        // 合并文件
rename = require('gulp-rename'),        // 重命名
clean = require('gulp-clean');          //清空文件夹

// less解析
gulp.task('build-less', function(){
gulp.src('./javis/static/less/lib/s-production.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/lib/'))

gulp.src('./javis/static/less/lib/s-skins.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/lib/'))

gulp.src('./javis/static/less/lib/s/s.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/lib/'))

gulp.src('./javis/static/less/*.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/'))
});

// 合并、压缩、重命名css
gulp.task('stylesheets',['build-less'], function() {
// 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件.
gulp.src(['./javis/static/build/css/*.css','!./javis/static/build/css/areaMap.css'])
.pipe(concat('all.css'))
.pipe(gulp.dest('./javis/static/build/css/'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('./javis/static/build/css'));
});

// 合并，压缩js文件
gulp.task('javascripts', function() {
gulp.src('./javis/static/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./javis/static/build/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('./javis/static/build/js'));
});

// 清空图片、样式、js
gulp.task('clean', function() {
return gulp.src(['./javis/static/build/css/all.css','./javis/static/build/css/all.min.css'], {read: false})
.pipe(clean({force: true}));
});

// 将bower的库文件对应到指定位置
gulp.task('buildlib',function(){

gulp.src('./bower_components/angular/angular.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/angular/angular.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/jquery/dist/jquery.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/angular-route/angular-route.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/angular-animate/angular-animate.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/angular-bootstrap/ui-bootstrap.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

gulp.src('./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')
.pipe(gulp.dest('./javis/static/build/js/'))

//--------------------------css-------------------------------------

gulp.src('./javis/static/less/fonts/*')
.pipe(gulp.dest('./javis/static/build/css/fonts/'))

gulp.src('./bower_components/bootstrap/fonts/*')
.pipe(gulp.dest('./javis/static/build/css/fonts/'))

gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('./javis/static/build/css/lib'))

});

// 定义develop任务在日常开发中使用
gulp.task('develop',function(){
gulp.run('buildlib','build-less','javascripts','stylesheets');

gulp.watch('./javis/static/less/*.less', ['build-less']);
});

// 定义一个prod任务作为发布或者运行时使用
gulp.task('prod',function(){
gulp.run('buildlib','build-less','stylesheets','javascripts');

// 监听.less文件,一旦有变化,立刻调用build-less任务执行
gulp.watch('./javis/static/less/*.less', ['build-less']);
});

// gulp命令默认启动的就是default认为,这里将clean任务作为依赖,也就是先执行一次clean任务,流程再继续.
gulp.task('default',['clean'], function() {
gulp.run('develop');
});

注：
gulp-ruby-sass : 支持sass
gulp-minify-css : 压缩css
gulp-jshint : 检查js
gulp-uglify : 压缩js
gulp-concat : 合并文件
gulp-rename : 重命名文件
gulp-htmlmin : 压缩html
gulp-clean : 清空文件夹

参考文章 官网