Gulp初体验-HTML，CSS，JS压缩 博客分类： 前端大全

GULP 初学配置新体验

1. 安装我就不多说了，直接去bootcss上面查询即可!
运行gulp后需要自己手动建立 package.json 文件，切记!

2. 需要如下组件

npm install --dev-save  gulp-concat
npm install --dev-save  gulp-minify-css
npm install --dev-save  gulp-autoprefixer
npm install --dev-save  gulp-uglify
npm install --dev-save  gulp-notify
npm install --dev-save  gulp-rename
npm install --dev-save  gulp-html-replace
npm install --dev-save  gulp-minify-html

3. 需要gulpfile的内容为

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifyHTML = require("gulp-minify-html");
var htmlreplace = require('gulp-html-replace');

gulp.task('html-replace',function() {
  var opts = {comments:false,spare:false,quotes:true};
  return gulp.src('app/**/*.html')
    .pipe(htmlreplace({
        'css': 'css/all.min.css',
        'js': 'js/all.min.js'
    }))  
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest('app/dest/'));
});


gulp.task('css',function(){
	return gulp.src('app/assert/css/main.css')
	
	.pipe(autoprefixer('last 15 version','ie 8'))
	.pipe(minifycss())
	.pipe(gulp.dest('app/dest/css/min'))
	.pipe(notify({message:'All done,master'}));
});

gulp.task('minifyjs',function(){
	return gulp.src('app/assert/js/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('app/dest/js/min'))
	.pipe(rename({suffix:'.min'}))
	.pipe(uglify())
	.pipe(gulp.dest('app/dest/js/min'))
	.pipe(notify({message:'JS All done,master'}));
});

gulp.task('default',function(){
	gulp.run('css');
	gulp.run('minifyjs');

	gulp.watch('app/assert/css/*.css',function(){
		gulp.run('css');
	});

	gulp.watch('app/assert/js/*.js',function(){
		gulp.run('minifyjs');
	});

	gulp.watch('app/**/*.html',function(){
		gulp.run('html-replace');
	});
});