gulp 构建工具

1. gulp 的简介

　　gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统 的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发 更加快速高效。

　　在学习前，先谈谈大致使用gulp的步骤，给读者以初步的认识。首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次 在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行 gulp任务即可。

　　安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务。

2.  关于gulp之前的 介绍

　　首先是nodejs的安装 使用版本管理器 git。 通过 git bush 来进行版本管理操作。

　　可以通过查看版本号来检测是否安装成功

　　node -v (node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）)

　　npm -v

　　gulp --version

　　使用 npm 安装插件： npm install <name> [-g] [--save-dev]

　　　　　　　　　　　　npm install gulp-less --save-dev

　　-g 全局安装

　　　　配置package.json的配置信息 通过npm init命令。

　　--save  将保存配置信息至package.json （package.json 是 nodejs项目配置文件）

　　-dev  保存至package.json 的 devDependencies节点  不指定-dev 将保存至depengdencies节点。

　选装 cnpm

　　因为主要是因为npm是从国外的服务器下载 受网络影响。 所以 使用淘宝镜像。

　　安装 cnpm  npm install cnpm -g --registry=https://registry.npm.taobao.org

　　使用方法跟npm 完全一样。

3. 正式进入 gulp的学习

　　 全局安装 gulp　　

　　　　cnpm install gulp -g

　　查看版本号 gulp --version

　　新建package.json文件 package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；

　　　$ npm init

　　　package.json 是类似这样的一个json文件(注意 在json内部是不能写注释的)

　　　

4. 本地安装 gulp 插件

　　本地安装 cnpm install gulp --save-dev

　　以示例 gulp-less为例(编译 less文件) 命令提示符执行 cnpm install gulp-less --save-dev

　　将会安装在node_modules的 gulp-less 目录下。 改目录下有一个gulp-less的使用帮助文档 README.md

　　PS: 全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

　　

5. 新建gulpfile.js 文件（重要）

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

　　　　

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

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

  　　  less = require('gulp-less');

 

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

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

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

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

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

　　});

 

　　gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

 

　　//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数

　　//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)

　　//gulp.dest(path[, options]) 处理完后文件生成路径

　　

6.  运行 gulp

　　命令提示符 gulp任务名称

　　编译less 命令提示符 执行 gulp testless

　　var gulp = require('gulp');

 

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

　 });

　　

 

　　gulp.js 的 API 非常简单，我们只需要了解四个就足以应对绝大多数的脚本编写了

　　

　　

　　gulp.task(name[,deps ], fn):注册任务

　　　　

　　name 是任务名称; deps是可选的数组 其中列出需要在本任务运行要执行的任务；fn 是任务体。这是gulp.js的核心了。需要花时间来吃　　透。详情见此

　　

 　　gulp.src( globs[,options]) 指明源文件路径

　　

　　gulp.dest(path) 指明任务处理后的目标输出路径

　　

　　gulp.watch（glob[,options],tasks）监视文件的变化并运行相应的任务。你没看错，watch 作为核心 API 出现在 gulp.js 里了，

 

 

 插件

　　

　　A) 语法检查 (gulp-jshint)

　　

　　B) 合并文件 (gulp-concat)

　　

　　C) 压缩代码 (gulp-uglify)

　　

　　D) 文件重命名 (gulp-rename)

 

 

$ cnpm install <plugin_name> --save-dev

 

最后的代码完成如下

　　

　　

　　

 

 

　　可以看出，基本上所有的任务体都是这么个模式：

 

 　　

 

 　　非常容易理解！获取要处理的文件，传递给下一个环节处理，然后把返回的结果继续传递给下一个环节……直到所有环节完成。

 

　　pipe 就是 stream 模块里负责传递流数据的方法而已，

　　　　

　　至于最开始的 return 则是把整个任务的 stream 对象返回出去，以便任务和任务可以依次传递执行。

 

 

 　　写成下面的方式 更为直观