项目构建gulp

Gulp是基于Nodejs开发的一个构建工具

· 借助gulp插件可以实现不同的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具。

1.安装使用gulp工具

 （1）首先需要安装Nodejs环境（官网），

node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。

npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。

（2）全局安装，npm install gulp -g

安装基于Nodejs的工具，可以通过Nodejs包管理器（npm）来完成

gulp -v 查看gulp安装版本，出现版本号说明安装成功

注：如果速度太慢，可以再命令后面添加淘宝镜像

--registry=https://registry.npm.taobao.org

（3）配置package.json

在项目跟目录下创建一个package.json的文件

在命令行输入 npm init 一直回车进行初始化该文件

会得到如下初始化的内容

（4）本地安装，到项目根目录执行 npm install gulp --save-dev

    添加--save-dev会在package.json记录依赖关系

注:（此例使用git操作，使用Windows命令操作需自己进入项目根目录）

注意在此时package.json中添加了devDependencies,放入了一个对象，对象中是本项目下安装的gulp及插件信息

（5）创建gulpfile.js文件（配置文件）

注：在根目录创建

  在gulpfile.js中定义构建任务，如压缩、合并，gulp自身并不执行任何任务，是通过调用具体插件来完成的。

1.引入本地安装的gulp     

var gulp = require('gulp');

2.安装所需gulp插件      

 var imagemin = require('gulp-imagemin');

3.定义任务   

// 压缩图片
gulp.task('image', function () {
gulp.src('./public/images/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./release/public/images'));

});                   

4.命令行执行任务

gulp image

2.gulp   API介绍

（1）定义不同的任务，'

gulp.task(‘任务名称’，function(){

定义任务

})

当任务之间存在依赖关系时

gulp.task(‘任务名称’，[‘依赖1’，‘依赖2’，...]，function(){

定义任务

}),此时，依赖任务中有将任务返回时，可直接执行该任务即可，

（2）需要构建资源的路径gulp.src('路径')

gulp.task(‘任务名称’，function(){

gulp.src('路径')

})

（3）将需要构建的资源传送给插件  gulp.pipe()

例：引入gulp-less插件

var less = require('gulp-less') ；

gulp.task(‘任务名称’，function(){

gulp.src('路径').pipe(less())

})

（4）构建任务完成后资源存放的路径 gulp.dest('路径')

var less = require('gulp-less') ；

gulp.task(‘任务名称’，function(){

gulp.src('路径').pipe(less()).pipe(gulp.dest('路径'))

})

3.常用插件介绍

（1）gulp-less 编译less文件，将less文件转换成css文件

（2）gulp-css 压缩css文件

（3）gulp-imagemin 压缩图片

（4）gulp-uglify 压缩javascript文件

（5）gulp-htmlmin 压缩html文件

（6）gulp-concat 合并文件

（7）gulp-rev 添加版本号，对文件名重命名

（8）gulp-rev-collector 内容替换，将重命名的文件替换

（9）gulp-rename 对文件重命名

注：所有插件的使用都需要安装

nmp install 插件名