初识gulp

之前一直听说gulp是自动构建工具，能够自动完成一些重复的任务，提高工作效率。当开始接触到sass才进一步了解它的强大。

什么是gulp？

gulp时基于Nodejs的自动任务运行器，她能自动化地完成JavaScript、cofee、Sass、Less、HTML、image、CSS等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp的使用

gulp大致可以分为几个步骤：

1. 安装nodejs

2. 全局安装gulp

3. 项目安装gulp以及gulp插件

4. 配置gulpfile.js

5. 运行任务

6. 安装nodejs

安装nodejs

nodejs官网
npm 常用命令

全局安装gulp

1. 说明：全局安装gulp目的是为了通过她执行gulp任务；

2. 安装：命令提示符执行npm install gulp -g；

3. 查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

新建package.json

在项目下，可以通过命令创建npm init

• package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件，不能添加任何注释。。

• cnpm是淘宝提供的一个完整的npm.org镜像

项目安装gulp以及gulp插件

1. 在自己的项目下面运行npm install --save-dev <name>安装对应的插件。

2. 这里以gulp-sass为例

   #本地安装gulp
   #全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
   npm install --save-dev gulp
   
   #在项目目录下运行
   npm install --save-dev gulp-sass

新建gulpfile.js文件

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

'use strict';
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp');//本地安装gulp所用到的地方
var sass = require('gulp-sass');

//定义一个sass任务
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')//任务针对的文件
    .pipe(sass().on('error', sass.logError))//任务调用的模块
    .pipe(gulp.dest('./css'));//生成路径
});

//默认执行
gulp.test('default',['sass'])

//监听任务
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

在项目下创建gulpfile.js文件，相关API可以点击查看 gulp API gulp sass

在node_modules的gulp-sass目录下，有一个gulp-sass的使用帮助文档README.md；

运行gulp

命令提示符执行gulp 任务名称；

执行gulp sass或者gulp default都将编译sass，后者在可加入更多的任务。
执行gulp sass:watch将监听任务文件，当其改变时自动完成编译。

参考资料

一点