码迷,mamicode.com
首页 > 其他好文 > 详细

前端自动化之神器 — Gulp

时间:2016-01-03 23:56:21      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

Nodejs不仅把Javascript带到了服务端,也在前端掀起了自动化的浪潮,推动了前端工作的历史性巨变,今天和大家一起学习前端自动化的神器---Gulp;

说起自动化,自然少不了Grunt,这位前辈目前社区完善,拥有几千个现成插件,install下来参考文档即可配置使用(参见:前端自动化之利剑——Grunt);而Gulp的出现,希望取其精华并取代Grunt,成为最流行的Javascript构建工具,Gulp采用代码优于配置的策略,让简单的事继续简单,让复杂的事变得可管理;

与Grunt的不同:

 

  • 流:Gulp是一个基于流的构建系统,使用代码优于配置的策略。
  • 插件:Gulp的插件更纯粹,单一的功能,并坚持一个插件只做一件事。
  • 代码优于配置:维护Gulp更像是写代码,而且Gulp遵循CommonJS规范,因此跟写Node程序没有差别。
  • 没有产生中间文件

 

使用Gulp的优势就是利用流的方式进行文件的处理,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。Gulp去除了中间文件,只将最后的输出写入磁盘,整个过程因此变得更快。

下面在根目录下新建一个Gulpfile.js,我们将完成以下任务:

 

  • 图片的无损压缩
  • Sass文件的编译压缩
  • JS文件的压缩合并
  • 对以上任务的实时监听

 

cmd进入项目根目录,安装所需要的Gulp及其插件:

1 npm install gulp gulp-imagemin gulp-ruby-sass gulp-uglify gulp-cache gulp-watch --save-dev

Gulp遵循Commonjs规范,所以你可以像写Nodejs程序一样把插件们require进来;

1 var gulp=require(‘gulp‘); 
2 var imagemin=require(‘gulp-imagemin‘);
3 var cache=require(‘gulp-cache‘); 
4 var uglify=require(‘gulp-uglify‘); 
5 var sass=require(‘gulp-ruby-sass‘); 
6 var watch=require(‘gulp-watch‘);

接着完成我们要完成的任务:

 1 //图片的无损压缩
 2 gulp.task(‘imagemin‘,function() {
 3     return gulp.src(‘./dist/images/**.*‘)
 4             .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
 5             .pipe(gulp.dest(‘./dist/images‘));
 6 });
 7 
 8 //js的压缩合并
 9 gulp.task(‘uglify‘, function() {
10     gulp.src(‘./js/*.js‘)
11         .pipe(concat(‘all.js‘))
12         .pipe(gulp.dest(‘./dist‘))
13         .pipe(rename(‘all.min.js‘))
14         .pipe(uglify())
15         .pipe(gulp.dest(‘./dist‘));
16 });
17 
18 //sass的编译压缩
19 gulp.task(‘sass‘,function() {
20     return sass(‘./dist/css/*.scss‘,{
21                 style:‘compressed‘,
22                 loadPath:[
23                     ‘common/vars‘,
24                     ‘mixins/mixin‘,
25                     ‘mixins/css3‘,
26                     ‘common/reset‘,
27                     ‘common/com-class‘,
28                     ‘placeholders/placeholder‘
29                 ]
30             })
31             .pipe(gulp.dest(‘./dist/min‘));
32 });
33 
34 //实时监听任务
35 gulp.task(‘watch‘,function() {
36     gulp.watch(‘./dist/css/*.scss‘,[‘sass‘]);
37     gulp.watch(‘./dist/react/main4.js‘,[‘uglify‘]);
38 })

是不是很酷!各插件详细配置,请自行github,同学们加油!

前端自动化之神器 — Gulp

标签:

原文地址:http://www.cnblogs.com/hufeng/p/5097375.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!