前端自动化构建工具---gulp的安装与基本使用方法

       什么是前端自动化构建工具呢，简单的来说就是可以把许多文件进行打包处理以及对于文件的压缩等操作，有三种比较常用的前端自动化构建工具，分别是webpack、gulp、grunt。

      一、下面简单的来介绍一下这三种前端自动化构建工具

       1、grunt的出现时间最早，有一套完整的插件，并且它的API使用起来相对来说比较麻烦。

       2、gulp的出现时间比较短，它的插件比较少，并且API使用起来比较简单，入门门槛低，它是采用的是all in one 的模式，即把所有的js文件进行打包成一个文件。

       3、webpack的出现时间是三者中最短的，它是采用amd和cmd 模式，即是按需加载，是分析项目中需要什么文件就引入什么文件，但它的入门门槛比较高。

       二、今天就单说一下gulp的安装与基本的使用方法。

        gulp的安装步骤

        1、安装gulp，进行全局安装---代码cnpm install -g gulp 

        2、初始化项目中的npm---npm init 

        3、项目内安装gulp---cnpm install gulp --save-dev   因为每个项目都需要前端自动化构建工具以及每个项目中可能用到的插件也是不一样的，所以要在每个项目中进行引入安装。

        接下来就可以使用gulp指令了，但在使用之前还是还要注意一点，这里还需要创建一个gulpfile.js文件，来对gulp里面的插件进行安装，因为单纯的一个gulp文件是不具备文件打包压缩的功能的，需要继续安装插件来进行使用。

        基本的测试插件有

        gulp-clean---清除文件。

        gulp-concat---将多个js文件变成一个文件，减少请求资源的次数---里面的参数代表这最终形成的是哪个文件。

        gulp-connect---开启服务器。

        gulp-cssmin---css代码的压缩。

        gulp-less---将less转化为css文件。

        gulp-imagemin---图片的压缩。

        gulp-load-plugins---加载插件。

        gulp-uglify---js代码进行压缩。

        gulp-watch()---第一个参数代表监听的是源码中哪个部分发生变化，第二个参数代表的是触发执行的指令。

        open---开启浏览器。

        下面举例说说明一下指令的具体使用方法

var gulp = require('gulp'),
clean= require('gulp-clean'),
less= require('gulp-less'),
cssmin= require('gulp-cssmin'),
concat= require('gulp-concat'),
imagemin= require('gulp-imagemin'),
uglify= require('gulp-uglify'),
open=require('open'),
connect=require("gulp-connect");
var app={
srcPath:"src/",
devPath:"build/",
prdPath:"dist/"
};
gulp.task("lib",function(){
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.devPath+"lib")) /*这里主要的功能就是进行文件的转移，省去了复制粘贴的麻烦*/
.pipe(gulp.dest(app.prdPath+"lib"))
});
gulp.task("html", function () {
gulp.src(app.srcPath+"**/*.html")
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe(connect.reload())
});

       首先是引入gulp这个文件中的插件，其次表示执行一个gulp任务，参数代表任务的名字和执行的方法（即执行的是哪些事件），执行这个任务的方法就是在任务管理器cmd中输入 gulp lib,当然你可以在这里使用server指令，开启服务器来进行监听哪个文件发生改变，这样就不需要每次都执行gulp指令

gulp.task('build', ['image', 'js', 'css', 'lib', 'html']);
gulp.task('server', ['build'], function() {
connect.server({
root: [app.devPath],
livereload: true,
port:4000
});
open('http://localhost:4000');
gulp.watch('bower_components/**/*', ['lib']);
gulp.watch(app.srcPath + '**/*.html', ['html']);
gulp.watch(app.srcPath + 'style/**/*.less', ['css']);
gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
gulp.watch(app.srcPath + 'image/**/*', ['image']);
});

        剩下的插件或者指令的使用方法可以去具体的官方文档进行学习使用，对于框架的学习中文档的学习起到非常重要的作用！