gulp使用备忘

1.bower的package.json中增加依赖：

"devDependencies": {
  "bower": "^1.7.7",
  "gulp": "^3.9.0",
  "gulp-concat": "^2.6.0",
  "gulp-htmlmin": "^2.0.0",
  "gulp-jshint": "^2.0.0",
  "gulp-minify-css": "^1.2.3",
  "gulp-rename": "^1.2.2",
  "gulp-uglify": "^1.5.1"
}

 2.安装gulp

npm install --global gulp

3.配置gulpfile.js

var gulp = require('gulp'),
    minifyhtml=require('gulp-htmlmin'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint = require('gulp-jshint');

gulp.task('minifycss', function () {
    return gulp.src([
        'app/css/xxx.css',
        'app/css/xxx.css',
        'app/css/xxx.css'
    ])
        .pipe(concat('main.css'))
        .pipe(gulp.dest('app'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('app'));
});
gulp.task('minifyjs', function () {
    return gulp.src([
        'app/js/xxx.js',
        'app/js/xxx.js',
       'app/js/xxx.js'
    ])
        .pipe(concat('main.js'))
        .pipe(gulp.dest('app'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('app'));
});
gulp.task('minifyhtml', function() {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('app/*.html')
        .pipe(minifyhtml(options))
        .pipe(gulp.dest('app'));
});
gulp.task('default', function () {
    gulp.start('minifycss', 'minifyjs','minifyhtml');
});

 4.运行gulp