Gulp安装、编译、合并、压缩

准备工作

前提是先安装node和npm（淘宝的cnpm）

http://npm.taobao.org/

安装gulp

npm install -g cnpm--registry=http://npm.taobao.org/
npm install --global gulp
//局部安装
npm install gulp --save-dev

安装完成的话，gulp模块下载到项目中的node_modules文件夹中。

配置gulpfile.js

// 引入 gulp及组件

    var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify"),
    gulpif = require("gulp-if"),
    htmlmin = require('gulp-htmlmin'),
    useref = require('gulp-useref'),
    clean = require('gulp-clean'),
    babel = require('gulp-babel'),
    cleanCss = require('gulp-clean-css'),
    runSequence = require("run-sequence"),
    cheerio = require('gulp-cheerio');

/* --------- version control ------------- */

gulp.task('clean', function () {
    return gulp.src('build', {read: false}).pipe(clean());
});

gulp.task('default', function (callback) {
    runSequence(
        'simple',
        "simpleApp",
        "simplePlugins",
        "simpleController",
        "simpleImages",
        "simpleCss",
        callback);
});

gulp.task('simple', ['clean'], function () {
    return gulp.src('index.html')
        .pipe(useref())
        .pipe(gulpif('*.js', babel({
            presets: ['es2015']
        })))
        .pipe(gulpif("*.js",uglify()))
        .pipe(gulp.dest('build/weather'))
});

gulp.task('simpleCss', function () {
    return gulp.src('css/font-awesome/**/**',{base:"./css"})
        .pipe(gulp.dest('build/weather/css'))
});

gulp.task('simplePlugins', function () {
    return gulp.src('js/iCheck/**/**',{base:"./css"})
        .pipe(gulp.dest('build/weather/js'))
});

gulp.task('simpleApp', function () {
    return gulp.src('content/**/*.html')
        .pipe(useref())
        .pipe(gulp.dest('build/weather/content'))
});

gulp.task('simpleController', function () {
    return gulp.src('controller/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build/weather/controller'))
});

gulp.task('simpleImages', function () {
    return gulp.src('picture/*.png')
        .pipe(gulp.dest('build/weather/picture'))
});

运行gulp

//编译所有的
gulp default
gulp default
//编译css
gulp simpleCss