gulp自动化构建工具

当我们实际做项目时，我们通常会：由多个开发者共同开发一个项目，每位开发者负责不同的模块；使用less、sass等一些预处理程序，降低CSS的维护成本，最终需要将这些预处理程序进行解析；合并css、javascript，压缩html、css、javascript、images以加速网页打开速度，提升性能；

这一系列的任务完全靠手动完成几乎是不可能的，而借助构建工具可以轻松实现。所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。

常见的构建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack

接下来说一下gulp的使用方法：

一.使用前提

1.安装nodejs、npm。gulp是基于nodejs开发，必须先安装nodejs，具体安装方法可参考之前的文章

2.建议安装git。

二、gulp使用

1.全局安装gulp，在任意位置打开git命令行执行以下：

npm install gulp -g

-g是-global的缩写，全局安装的意思，之后执行gulp -v，出现版本号说明全局安装成功。

2.创建一个项目文件夹如gulpFil，这就是我们的开发工作目录，然后切换到这个空文件夹下，创建一个src文件夹，并在src下根据具体需要创建index.html等文件、images、js、style、view等文件夹，具体开发代码就写在这里面。

3.在项目文件夹gulpFil下执行

npm init

，后一路回车，注意开始输入文件名时不能大写。这句命令主要是为了在项目中生成package.json文件，该文件记录了所有安装的依赖，也就是所有项目需要的三方插件，主要是起到记录的作用。

4.项目中安装gulp

上面第一步是全局安装gulp，只需执行一次，而我们每做一个项目在项目中都需要再生成一个gulp，可以理解为专门为这个项目服务的，切换到项目目录如（gulpFil中）执行以下：

npm install --save-dev gulp

–save-dev的意思是安装并记录开发依赖（devDependencies），我们说package.json就是记录依赖的，现在我们打开package.json发现多了这句命令安装的gulp依赖记录。还多了什么呢，项目目录下还多了一个node_modules文件夹，里面就是我们安装的具体插件，刚刚安装的gulp也在其中。

5.安装具体的gulp插件

安装gulp之后，我们还需要安装gulp插件，简单来说是用什么装什么就可以。如下图我们要实现合并压缩解析less等一系列任务都需要安装具体的插件。



项目目录中执行：

npm install gulp-less gulp-cssmin gulp-imagemin gulp-concat gulp-uglify gulp-connect open --save-dev

执行完毕后package.json文件中又多了以上插件的依赖记录，node_modules文件夹中也下载了上述插件的具体文件夹。

简单解释一下它们的作用：

1. gulp-less：把less文件解析并转换成css文件。

2. gulp-cssmin：压缩css文件

3. gulp-imagemin：压缩图片

4. gulp-uglify：丑化代码

5. gulp-concat：合并js代码，多个js文件最终都会被合并成为一个js文件

6. gulp-connect：实现热加载

6、项目中创建gulpfile.js文件，此文件中描述gulp具体执行的任务，也就是上面装好插件工具我们就要具体干活了。文件内容一般如下，当然自己可以再拓展

//一、设置目录地址，分别是下面三块
var app = {
srcPath:'src/',//代码目录
buildPath:'build/',//设置开发目录
distPath:'dist/'//生产打包上线目录
}
//二、引入插件js文件
/*1.引入gulp及插件，也就是引入我们下载的node_modules中的插件对应的js文件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open');

//三、定义任务gulp.task('任务名',回调函数)

/*1.定义lib任务*/
gulp.task('lib',function () {
gulp.src('bower_components/**/*.js')//找到bower_components目录并把下的所有js文件放到开发和生产目录中的lib文件夹中
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
.pipe(connect.reload())
});

/*2.定义任务html任务*/
gulp.task('html',function (){
/*gulp.src指要操作哪些文件来确定源文件地址，意思是取src下所有目录下的所有.html文件*/
gulp.src(app.srcPath+'**/*.html')
/*pipe管道的意思，gulp.dest指把文件从源地址移动到指定目录下，没有指定的目录会自动创建*/
.pipe(gulp.dest(app.buildPath))
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload())
});

/*3.定义编译less任务*/
gulp.task('less',function () {
/*找到index.less文件，注意一般只提取index.less文件，如果有多个less文件可以用import方式先全部引入到index.less中。*/
gulp.src(app.srcPath+'style/index.less')
.pipe(less())//用less方法解析less代码
.pipe(gulp.dest(app.buildPath+'css/'))//把解析后生成的的css文件放到build开发文件夹的css文件夹中
.pipe(cssmin())//cssmin()方法压缩css代码
.pipe(gulp.dest(app.distPath+'css/'))//把压缩后的css文件放到生产目录中
.pipe(connect.reload())
});

/*4.定义合并js任务*/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/**/*.js')//找到代码目录里的所有js文件
.pipe(concat('index.js'))//合并到index.js文件中
.pipe(gulp.dest(app.buildPath+'js/'))//移动到开发目录的js目录下
.pipe(uglify())//丑化js代码
.pipe(gulp.dest(app.distPath+'js'))//丑化后的代码放到生产目录下
.pipe(connect.reload())
});

/*5.压缩图片任务*/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/**/*')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
});

//四、整合执行任务

/*1.定义build任务，同时执行[]中的多个任务*/
gulp.task('build',['less','html','js','image','lib']);

/*2.定义设置服务器任务，并设置先执行[]中的build任务*/
gulp.task('server',['build'],function () {
connect.server({
root:[app.buildPath],//设置要运行的目录是build开发目录
livereload:true,//设置是否热加载
port:9999//设置端口号
})

/*3.设置监听的文件，一旦坚挺的文件发生变化则重新自动执行gulp对应的任务名称并生成开发和生产目录*/
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath+'**/*.html',['html']);
gulp.watch(app.srcPath+'js/**/*.js',['js']);
gulp.watch(app.srcPath+'images/**/*',['image']);
gulp.watch(app.srcPath+'style/**/*.less',['less']);
//打开浏览器
open('http://localhost:9999');
});

/*4.定义默认任务 执行'gulp'命令则执行默认任务，相当于一个总开关，
默认任务实际执行的是‘server'任务，而server任务又会
先执行’build'任务，很有意思是个链式作用*/
gulp.task('default',['server']);

7.项目目录中执行

gulp

，后会自动打开浏览器和服务器运行项目。一般设置命令运行的目录是开发目录也就是build下的文件，所以我们在html文件中引入css文件和js文件要按照build目录下css和js的路径和名称引入，这点应注意。