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…