关于gulp的使用心得

（最近一直搞angularjs.项目里非要用2个包管理器npm和bower，2个任务运行器webpage、gulp.我想BB。）

gulp是什么？

       gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

       注：gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

gulp常用地址：

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424

废话不多说，开干。。。

首先需要安装node.node自带npm管理包（node安装过程这里不详细讲。百度很多）

     推荐使用淘宝的cnpm镜像，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了。淘宝cnpm官方网址

1.全局安装gulp

    全局命令提示符执行 cnpm install gulp -g

查看是否安装成功 gulp -v

好，gulp的环境已经搞定了，接下来就是使用gulp,

2.gulp的实战

创建app文件夹。在文件夹里添加package.json文件（package.json是node的配置文件）

package.json的代码如下：

{

    "name": "test",  

    "version": "1.0.0",  

    "description": "test gulp",  

    "homepage": "",  

    "author": {    

       "name": "lucky",

       "email": "*****@qq.com"

    },

    "license": "ISC",    

    "devDependencies": {    

    "gulp": "^3.8.11",

    "gulp-sass": "^2.3.2"

    }

}

同时创建 src 文件夹 和 dist 文件夹

接下来下载依赖包。在项目目录下使用命令提示符执行 cnpm install

（注：package.json的注释需要全部删除。否则会报错！！！）

成功之后，会多了对应的依赖文件了，说明成功。如图

好了，在根目录下创建gulpfile.js文件

     说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

gulpfilejs 的代码如下：

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'), //本地安装gulp所用到的地方

sass = require('gulp-sass');

//定义一个sass任务（自定义任务名称）

gulp.task('sass', function () {

     gulp.src('src/sass/index.scss') //该任务针对的文件

      .pipe(sass()) //该任务调用的模块

      .pipe(gulp.dest('dist/css')); //将会在src/css下生成index.css

});

gulp.task('default',['sass']); //定义默认任务

接着，在src里面创建css文件,在src里面创建sass文件夹，并在sass文件夹中创建index.scss；

index.scss代码如下：

//sass style,如果不会sass语法，可百度

$primaryColor: #333;

$linkColor: #333;

body {  

     color: $primaryColor; 

}

a{

     color:nth($linkColor,1);

     &:hover{

          color:nth($linkColor,2);

     }

}

接下来通过gulp 编译sass文件.

运行命令行 gulp sass (sass 是在gulpfilejs自定义任务名称)

查看dist的css文件下，就会通过gulp 输出的css文件了。

如果我们每次都修改sass文件，我们每次都要去编辑命令？

其实我们可以利用gulp 的监听方法，只要文件有修改就自动编译。

接下来我们修改gulpfilejs文件，

gulpfilejs代码：

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'), //本地安装gulp所用到的地方

sass = require('gulp-sass');

//定义一个sass任务（自定义任务名称）

gulp.task('sass', function () {

     gulp.src('src/sass/index.scss') //该任务针对的文件

      .pipe(sass()) //该任务调用的模块

      .pipe(gulp.dest('dist/css')); //将会在src/css下生成index.css

});

gulp.task('default',['sass']); //定义默认任务

//新增的代码。watch函数

//监听任务,src/sass目录下的所有sass文件

gulp.task('watch', ['sass'], function () {

     gulp.watch('src/sass/*.scss', ['sass']);

});

运行命令行 gulp watch

现在如果修改sass文件的话，gulp就会监听，就会自动帮你编译css文件了。

好了，gulp的最基本的教程就结束了，gulp还有很多的插件，我就不一一实现了。