使用gulp构建项目

一.环境准备

1.1 gulp介绍

• gulp是基于node.js 文件流的一个前端自动化构建工具，可以使用它构建自动化工作流程，简化工作量
• 官方定义：基于文件流的构建系统
• 核心文件：gulpfile.js和package.json
  • gulpfile.js：任务脚本
  • package.json：任务配置文件

1.2 安装gulp

npm install gulp -g

1.3 构建项目

• (1)切换到项目根目录(即 gulpfile.js 所在目录)，命令行安装任务所依赖的包：npm install
• (2)安装完成后，即可直接执行命令：gulp

二.使用实例 - 打包js和css

2.1 在 package.json中引用依赖gulp-minify-css和gulp-uglify

"devDependencies": {
	"del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-header": "^1.8.8",
    "gulp-minify-css": "^1.2.4",
    "gulp-replace": "^0.6.1",
    "gulp-uglify": "^1.5.4"
  }

2.2 定义我们第一个gulp流程

var pkg = require('./package.json');
var del = require('del');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var replace = require('gulp-replace');
var header = require('gulp-header');

// 定义任务
var destDir = './dist' // 构建的目标目录
,note = [// 注释
  '/** <%= pkg.name %>-v<%= pkg.version %> <%= pkg.license %> License By <%= pkg.homepage %> */\n <%= js %>'
  ,{pkg: pkg, js: ';'}
]
,task = {
  minjs: function(){// 压缩 JS
    var src = [
      './src/**/*.js'
      ,'!./src/config.js'// ! 表示不压缩该文件
    ];
    
    return gulp.src(src).pipe(uglify())// 使用压缩工具
     .pipe(header.apply(null, note))
    .pipe(gulp.dest(destDir));
  }
  
  ,mincss: function(){// 压缩 CSS
    var src = [
      './src/**/*.css'
    ]
     ,noteNew = JSON.parse(JSON.stringify(note));
    noteNew[1].js = '';
    
    return gulp.src(src).pipe(minify({
      compatibility: 'ie7'
    })).pipe(header.apply(null, noteNew))
    .pipe(gulp.dest(destDir));
  }
  
  ,mv: function(){// 复制文件夹
    gulp.src('./src/config.js')
    .pipe(gulp.dest(destDir));
    
    return gulp.src('./src/views/**/*')
    .pipe(gulp.dest(destDir + '/views'));
  }
};

// 清理工作
gulp.task('clear', function(cb) {
  return del(['./dist/*'], cb);
});

// 构建入口
gulp.task('default', ['clear', 'src'], function(){
  for(var key in task){
    task[key]();
  }
});

2.3 构建输出

[13:31:17] Using gulpfile .\xxx\gulpfile.js
[13:31:17] Starting 'clear'...
[13:31:17] Starting 'src'...
[13:31:17] Finished 'src' after 11 ms
[13:31:17] Finished 'clear' after 57 ms
[13:31:17] Starting 'default'...
[13:31:17] Finished 'default' after 5.26 ms