GULP 初学配置新体验
1. 安装我就不多说了,直接去bootcss上面查询即可!
运行gulp后需要自己手动建立 package.json 文件,切记!
2. 需要如下组件
3. 需要gulpfile的内容为
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');
});
});