gulp---gulp的使用说明以及常见插件，入门篇

gulp的基本使用

      gulp是很经典的前端构建工具，它使用nodejs中的stream进行运作，所以使用gulp要确保电脑已经安装配置了nodejs环境。

---

1. gulp安装

---

      安装的可以全局、本地、依赖式安装，本文推荐依赖安装、或者三种方法全部安装；

• 全局:npm install gulp -g

• 本地:npm install gulp

• 本地:npm install gulp --save-dev

---

2. gulp使用说明

---

      如同grunt.js需要gruntfile.js, gulp的运行需要依赖一个主文件gulpfile.js(当然也可以 改成其他名字，不过需要进行配置)，将其放到项目根目录。gulpfile.js配置分为三个主要部分：依赖require、定义认为task、默认任务default。

• require：

        既然是gulp，当然必不可少，要引入gulp：var gulp=require('gulp');

        gulp可以说成是渐进式工具，需要什么引入什么。如果需要css压缩，则引入gulp-minify-css:var minifyCss=require('gulp-minify-css'),同理需要合并，则引入gulp-concat:var concat=require-concat…最必不可少的是引入前请先安装插件：npm install gulp-concat --save-dev

• task：

        下载、引入并定义完需要的插件之后，便是定义任务。定义任务task必不可少的四要素：taskName、gulp.src()、pipe()、gulp-dest()。如下所示：

  gulp.task(taskName,[task1,task2…],function(){

  gulp.src(inPath)

.pipe(fun)
.pipe(gulp.dest(gulp.dest(outPath)))

}

      其中，taskName为定义的任务名、[task1、task2]为当前task所依赖的task(如果没有依赖其他task，此项可忽略！)、gulp.src(inPath)为要处理的文件路径(可以单指向某一个文件、也可以通过正则选择多个文件，如sass/*.scss就是sass文件夹下面所有的scss文件)、pipe(fun)则是处理过程fun即为引用的插件方法、gulp.dest(outPath)为处理完毕后的输出路径(输出路径默认是根目录)。

      整个过程：gulp.src引入文件，通过pipe交给插件进行处理如:pipe(minifyCss())对引入的css文件压缩(此处可以多个pipe(fun)进行链式操作)，最后通过pipe交回gulp，gulp.dest对处理后的文件进行输出处理。

如：

gulp.dest('minCss',function(){    gulp.src('css/*.css')    .pipe(minifyCss())    .pipe(rename({suffix:'.min'}))    .pipe(gulp.dest('css/min'))}）

      例子定义了压缩并重命名的任务。

• dfault:

      引入插件、定义任务完成之后，就是gulpfile.js运行默认执行的任务，此项也可以省略，但是需要gulp运行的时候指明所要运行的任务。此项不可省略的是default关键字，示例如下：

gulp.task('default',['minCss','minJs']);

第二个参数’[]’是个任务数组，可以放多个任务，gulp运行时候，按序执行。

• watch:

      如果你想要让gulp自动监听代码变化，则gulp.watch可以帮您完成。如果使用gulp.wacht方法，则default默认任务执行列表则可以省略，gulp.watch(path,[task1,task2]),依然示例说明：

gulp.watch('sass/*.scss',['sassToCss','minCss','rename']);

      例子监听sass目录下所有的scss文件，进行执行’sassToCss’,’minCss’,’rename’任务，gulpfile.js里面可以有多个监听，视需求而定。

      so…一个小的gulpfile.js配置文件便出来了:

var gulp=require('gulp'),    sass=require('gulp-sass'),    css=require('gulp-minify-css'),    rename=require('gulp-rename');gulp.task('sassToCss',function(){    gulp.src('sass/*.scss')    .pipe(sass())    .pipe(gulp.dest('css'))});//sassToCss执行了sass目录下的scss文件转css格式,并保存到css文件夹gulp.task('minCss',function(){    .gulp.src('css/*.css')    .pipe(css())    .pipe(gulp.dest('css/min')) })//minCss任务压缩了css文件夹下面的css文件并保存到css下min目录gulp.task('renameCss',function(){    gulp.src('css/min/*.css')    .pipe(rename({suffix:'.min'}))    .pipe(gulp.dest(css/min))})//minCss将css/min目录下的css文件添加后缀.min进行改名保存gulp.task('default',['sassToCss','minCss','renameCss']);gulp.watch('sass/*.scss',['default']);

      那么，gulpfile位置处cmd运行gulp便执行了default任务并且监听sass下scss文件的变化，一个简单的gulpfile.js便已经配好。可能有些博友会说，代码有些多余，在此，我只是想够直白的说明问题…

---

3. gulp常用插件

---

      gulp的插件很多，不过一般的开发需求无非js、css、img的压缩与合并，less、sass的编译，本文仅列出这些最常用插件，插件的安装为依赖安装。

——less、sass编译

• gulp-less:

安装：

npm install gulp-less --save-dev

示例：

var gulp=require('gulp'),    less=require('gulp-less');gulp.task('lessToCss',function(){    gulp.src('less/*.less')    .pipe(less())    .pipe(gulp.dest('css'))});

- gulp-sass:
安装：

npm install gulp-sass --save-dev

示例：

var gulp=require('gulp'),    sass=require('gulp-sass');gulp.task('sassToCss',function(){    gulp.src('sass/*.sass')    .pipe(sass())    .pipe(gulp.dest('css'))});

——html、css、img、js压缩

• gulp-minify-html:
  安装：

  npm install gulp-minify-html –save-dev
  示例：

  var gulp=require(‘gulp’),
  minHtml=require(‘gulp-minify-html’);
  gulp.task(‘minHtml’,function(){
  gulp.src(‘html/*.html’)
  .pipe(minHtml())
  .pipe(gulp.dest(‘html/min’))
  });

• gulp-minify-css:
  安装：

  npm install gulp-minify-css –save-dev
  示例：

  var gulp=require(‘gulp’),
  minCss=require(‘gulp-minify-css’);
  gulp.task(‘minCss’,function(){
  gulp.src(‘css/*.css’)
  .pipe(minCss())
  .pipe(gulp.dest(‘css/min’))
  });

• gulp-imagemin:
  安装：

  npm install gulp-imagemin –save-dev
  示例：

  var gulp=require(‘gulp’),
  imagemin=require(‘gulp-imagemin’);
  gulp.task(‘imagemin’,function(){
  gulp.src(‘img/*.{jpg,gif,pgn}’)
  .pipe(imagemin())
  .pipe(gulp.dest(‘img/min’))
  });
  imagemin仅考虑基本用法，图片深度压缩，大家可以自行百度。

• gulp-uglify :
  安装：

  npm install gulp-uglify –save-dev
  示例：

  var gulp=require(‘gulp’),
  uglify=require(‘gulp-uglify’);
  gulp.task(‘uglify’,function(){
  gulp.src(‘js/*.js’)
  .pipe(uglify())
  .pipe(gulp.dest(‘js/min’))
  });

——文件合并

安装：

npm install gulp-concat --save-dev

示例：

var gulp=require('gulp'),    concat=require('gulp-concat');gulp.task('concat',function(){    gulp.src('js/*.js')    .pipe(concat('base.js'))//base.js为合并后的输出文件    .pipe(gulp.dest('js'))});

——重命名

安装：

npm install gulp-rename --save-dev

示例：

var gulp=require('gulp'),    rename=require('gulp-rename');gulp.task('rename',function(){    gulp.src('js/*.js')    .pipe(rename({suffix:'.min'}))//所有js文件夹下的js文件都添加后缀.min    .pipe(gulp.dest('js/min'))});

---

本文都是gulp最基础的知识，下一篇文章会深入探讨gulp…