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