1. 程式人生 > >gulpfile.js配置 實現ctrl+s自動編譯和刷新瀏覽器

gulpfile.js配置 實現ctrl+s自動編譯和刷新瀏覽器

des list html task -html load func cti load()

var gulp = require("gulp"); //引進gulp模塊
var uglify = require("gulp-uglify"); //js壓縮
var minifyCss = require("gulp-minify-css"); //css壓縮
var minifyHtml = require(‘gulp-minify-html‘); //html壓縮
var imagemin = require(‘gulp-imagemin‘); //圖片壓縮
var sass = require(‘gulp-sass-china‘); //sass編譯
var livereload = require(‘gulp-livereload‘); //刷新


//js壓縮
gulp.task(‘minijs‘, function() {
gulp.src(‘src/js/*.js‘) //要壓縮的js文件
.pipe(uglify()) //用uglify壓縮
//.pipe(rename(‘yasuo.min.js‘)) //js重命名
.pipe(gulp.dest(‘dist/js‘)); //壓縮後路徑
})

//css壓縮
gulp.task(‘minicss‘, function() {
gulp.src(‘src/css/*.css‘) //要壓縮的css文件
.pipe(minifyCss()) //壓縮css

.pipe(gulp.dest(‘dist/css‘)); //壓縮後的路徑
})

//html壓縮
gulp.task(‘minihtml‘, function() {
gulp.src(‘src/*.html‘) //要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(gulp.dest(‘dist‘)); //壓縮後的路徑
})

//圖片壓縮
gulp.task(‘miniimg‘, function() {
gulp.src(‘src/img/*.{jpg,png,gif,ico}‘) //要壓縮的圖片文件
.pipe(imagemin()) //壓縮圖片

.pipe(gulp.dest(‘dist/img‘)) //壓縮後保存的路徑
})

//sass編譯
gulp.task(‘sass‘,function(){
gulp.src(‘src/sass/*.scss‘)
.pipe(sass())
.pipe(gulp.dest(‘src/css‘))
.pipe(livereload());
})
//監聽.scss
gulp.task(‘watch‘,function(){
livereload.listen();//要在這裏調用listen()方法
gulp.watch(‘src/sass/*.scss‘,[‘sass‘])
})


//用gulp實現編譯
gulp.task(‘default‘,[‘sass‘,‘watch‘]);


//gulp compress 實現img/js/css/的壓縮
gulp.task(‘compress‘,[‘minijs‘,‘minicss‘,‘miniimg‘]);

gulpfile.js配置 實現ctrl+s自動編譯和刷新瀏覽器