前端自动化构建工具-gulp

gulp 和grunt这两个是我知道的自动构建工具，可是说实话都没在项目中用过，不太清楚自动化构建是什么意思，

一、grunt和gulp有什么相同点和不一样点？

　　（1）、易于使用：采用代码优于配置策略，gulp让简单的事情继续简单，复杂的任务变得可管理；

　　（2）、高效：经过利用Node.js强大的流，不须要网磁盘写中间文件，能够更快地完成构建；

　　（3）、高质量：gulp严格的插件知道发昂真，确保插件简单而且按照你指望的方式工做；

　　（4）、易于学习：经过把API降到最少，你能在很短的时间内学会gulp，构建工做就像你设想的同样：是一系列流管道；

　　（5）、易用gulp相比grunt更简洁，并且遵循代码优于配置的策略，维护gulp更像是写代码。高效gulp相比grunt更有设计感，核心设计基于unix流的概念，经过管道链接，不须要写中间件，高质量gulp的每一个插件只完成一个功能，这也彷佛unix的设计原则之一，各个功能经过流进行整合并完成复杂的任务。例如：grunt的imagemin插件不只压缩图片，同事还包括缓存功能。他表示，在gulp中，缓存是另外一个插件，能够被别的插件使用，这样就错金了插件的可重用性。易学gulp的核心API只有5个，掌握了5个API就学会了gulp，以后就能够经过管道流组合本身想要的任务。

二、如何使用gulp配置本身的项目

　　（1）、想要在项目中使用gulp，就要全局安装gulp，执行命令以下

　　npm install gulp -g

　　这样就算是在计算机上安装了全局gulp，也就意味着可使用Gulp中的模块了（必须全局安装，局部安装，cmp中gulp命令不能执行）。

　　（2）、创建文件夹

　　　　　　新建文件夹managres,managers下面新建两个文件夹dist和src，一个表示源头，一个表示输出，而后通关过git bash工做在managers文件夹下执行命令

　　　　　　nom init     ---用于生成package.json文件

　　　　

　　　　回车以后，gulpManagers下目录结构以下图：

　　　　

　　　　（3）、开始安装须要用到的插件，这里我作几个中要的说明一下，其余的插件能够本身去摸索

　　　　npm install --save-dev gulp（save-dev指的是把gulp配置到本项目的package.json文件下，由于你要使用人家的插件，确定须要他来指挥）

　　　　npm install --save-dev gulp-uglify（这个插件是用来压缩js的）

　　　　npm install --save-dev gulp-ruby-sass（这个是用来编译sass的）

　　　　npm install --save-dev gulp-notify（这个是提醒插件）

三、讲解一下gulp总要的4个API

　　gulp.src();表示文件的来源，或者说是读取文件

　　gulp.dest();表示文件的输出，也就是输出文件

　　gulp.task();表示要执行的任务

　　gulp.watch();表示要监听的任务

四、接着讲压缩js

　　在gulpManagers文件夹下新建gulifile.js，在src文件夹下新建文件夹js，并在js文件夹下新建文件index.js

　　(1)、如何去本身写人物文件(gulpfile.js)

　　　　

//引入须要的插件
var gulp =require('gulp');
var uglify=require('gulp-uglify');
var notify=require('gulp-notify');

//布置任务
gulp.task('uglify',function(){
    gulp.src('src/js/**/*.js')  //读取项目中的js文件
        .pipe(uglify())  //利用插件进行压缩
        .pipe(gulp.dest('dist/js'))  //压缩事后偶输出文件到指定目录
        .pipe(notify({message:'uglify is ok'}))   //提醒你：压缩任务完成了
})

　　（2）、如今dist文件夹下面新生成了一个js文件夹，里面有一个index.js文件，这个就是压缩后的文件了。

五、监听js的改变

　　或许有人会问，若是的js文件变更了，能不能监听到呢？

　　在gulp你能够经过watch来监听js的改变

　　（1）、将gulpfile.js文件里面本来的东西注释掉，将dist文件下全部东西删除掉，新写gulpfile.js文件

//引入须要的插件var gulp=require('gulp');var uglify=require('gulp-uglify');var notify=require('gulp-notify');//布置任务gulp.task('uglify',function(){    gulp.src('src/js/**/*.js')  //读取项目中的js文件        .pipe(uglify())   //利用插件进行压缩        .pipe(gulp.dest('dist/js'))  //压缩事后输出到文件指定目录        .pipe(notify({message:"uglify is ok"}))  //提醒任务完成})gulp.task('watch',function(){    gulp.watch("src/js/**/*.js",["uglify"])  //监听文件夹下js变化，执行压缩任务})　　（2）、在cmd中执行watch：gulp watch    回车，如今去src/js/index.js下面改动内容，点击保存的时候，会出现提醒消息：uglify is ok。而且在dist/js下面多了一个新压缩的index.js文件。（屡次改动src/js下index.js文件，点击保存，执行压缩，dist/js/index.js一直都彷佛一份最新的文件，并不会每次保存一份）。