gulp前端自动化构建

首先安装 Node.js ，此时已自带安装 npm 包管理器。

全局安装 gulp
执行$ npm install gulp -g，然后即可在命令行直接执行 gulp 命令，输入 gulp -v 查看安装版本。

建立 package.json 文件

package.json 文件储存项目的相关信息，项目根目录直接建立 package.json ，或者命令行执行 $ npm init，填写名称、描述等信息，查看帮助： $ npm help package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "Project info",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "keywords": [
    ""
  ],
  "author": "Kenny",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

本地安装 gulp
$ npm install gulp --save-dev

创建 gulpfile.js

首先写一个 Hello, world

var gulp = require('gulp');

gulp.task('SayHello',function(){
    console.log('Hello, world');
})

先引用 gulp 组件，再执行一个 SayHello 任务，执行命令： $ gulp SayHello，即可打印出 Hello, world 。

日常使用中，一般都需要执行很多任务，不管多少任务，首先安装需要使用的组件，再引用组件，再分配任务，最后执行任务。

var gulp = require('gulp'),
    //Plugins模块获取
    minifycss = require('gulp-minify-css'),

    //压缩src目录css文件
    gulp.task('minify-css', function() {
        return gulp.src('./src/css/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./dist/css'));
    });
	//监控文件变化
	gulp.task('watch',function(){
        gulp.watch('src/css/*.css',['minify-css']);
    })

    // 执行 gulp 命令时执行的任务
    gulp.task('default', [
        'watch','minify-css'
    ]);

这里调用了 gulp-minify-css ，所以首先需要安装： $ npm install gulp-minify-css --save-dev。

这里部署了两个任务，一个是压缩 CSS 文件，第二个是监控 CSS 原始文件，只要在命令行执行 gulp 命令即会执行这两个任务（已设置default任务名），还可以安装其它模块执行各种各样的任务，比如压缩 JS，压缩图片，压缩 HTML，文件监控，文件合并，HTML 头尾加载等等……

新模块：安装,引入,使用。

参考

gulp插件
npm的package.json中文文档