Gulp介绍和应用

与Grunt的不同:

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

  • 流: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
2
3
4
5
6
var gulp=require('gulp');
var imagemin=require('gulp-imagemin');
var cache=require('gulp-cache');
var uglify=require('gulp-uglify');
var sass=require('gulp-ruby-sass');
var watch=require('gulp-watch');

Gulp
Gulp开发教程
Grunt-beginner前端自动化工具

文章目录
  1. 1. 与Grunt的不同:
,