gulp 安装启动

参考文档：http://www.ydcss.com/archives/18

 一、gulp优势

1. 易于使用，代码优于配置
2. 高效，不会产生过多的中间文件，减少I/O压力
3. 易于学习，API非常少，你能在很短的事件内学会gulp

二、gulp方法

1. gulp.src: 源文件的路径
2. gulp.dest: 处理后文件的路径
3. gulp.pipe: 管道
4. gulp.watch: 监视文件系统，文件改动时自动处理，即 用来监听文件的变化
5. gulp.task: 任务

三、安装gulp

Gulp是基于 Node.js的，故要首先安装 Node.js；

npm install -g gulp //全局安装gulp

npm install gulp --save-dev //项目里安装gulp

四、新建 package.json 文件

 在项目的根目录下新建

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

4.2、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

4.3、也可通过下面代码初始化产生package.json文件（国内：cnpm init）

npm init .

 　  4.4、通过下面的指令 会根据package.json这个文件安装插件

npm install

  

 

文件配置信息 FileConfig.js

"use strict";

var path = require('path');

/* 环境信息 */

var source = 'source',

develop = 'develop',

production = 'production';

/* src路径 */

var src = {

tpl: 'tpl/**',

css: 'styles/**/*.less',

js: 'lib/**/*.js',

html: '/**.html',

img: 'images/**'

}

/* 模块信息 */

var modules = {

"t1": {

src: 't1',

dest: 't1',

name: 't1',

css_files: 'styles/app.less'

},

"t2": {

src:'t2',

dest: 't2',

name: 't2'

},

"index": {

src:'index',

dest: 'index',

name: 'index'

},

"common": {

src:'common',

dest: 'common', 

name: 'common' 

}

};

 

 

添加一个gulpfile.js文件

/* 载入工具 */

var argv = require('yargs').argv,

_ = require('lodash'),

path = require('path');

 

//简易任务手册

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

console.log(' gulp build 文件打包');

console.log(' gulp watch 文件监控打包');

console.log(' gulp help gulp参数说明');

console.log(' gulp server 测试server');

console.log(' gulp -p 生产环境（默认生产环境）');

console.log(' gulp -d 开发环境');

console.log(' gulp -m <module> 部分模块打包（默认全部打包）');

});

//build任务

 

/* 默认 */

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

gulp.start('help');

});