寫在前面：

本配置支持es6、less、react

1.首先

給出初始的目錄結構

給出執行gulp后的目錄結構

給出執行gulp --p后的目錄結構

2.package.json里是一個寫入。文件描述了npm包的相關配置信息（作者、簡介、包依賴等）和所需模塊。

{"name": "gruntTest", "version": "1.0.0","description": "","main": "Gulpfile.js" }

3.Gulpfile.js添加要執行的任務

var gulp = require('gulp'); var uglify = require('gulp-uglify'); //js壓縮 var concat = require('gulp-concat'); //合并文件 var minifyCSS = require('gulp-minify-css'); //css壓縮 var less = require('gulp-less'); //less var changedInPlace = require('gulp-changed-in-place');//不管修改哪個文件，gulp會簡化DEST里的html文件 var minifyHTML = require('gulp-htmlmin'); //簡化html var browserSync = require('browser-sync').create(); //自動刷新 var babel = require('gulp-babel'); //支持es6 var argv = require('yargs').argv; //支持不同環境 var sequence = require('gulp-sequence'); //按照順序執行 var watch = require('watch'); //監聽 var clean = require('gulp-clean'); //監聽 //npm install --save-dev gulp-babel babel-preset-es2015 var DEST = 'dest/'; var HTML_PATH = './src/*.html';gulp.task('minify-js', function(){if(argv.p){gulp.src('src/source/*.js').pipe(babel({presets: ['es2015','react']})).pipe(uglify()).pipe(concat('gruntTest.min.js')).pipe(gulp.dest(DEST+'js'))}else{gulp.src('src/source/*.js').pipe(babel({presets: ['es2015','react']})).pipe(uglify()).pipe(concat('gruntTest.min.js')).pipe(gulp.dest('src/js')) } }); gulp.task('minify-css', function(){if(argv.p){gulp.src('src/less/*.less') //或者用['src/less/p1.less','src/less/p2.less'].pipe(less()).pipe(minifyCSS()).pipe(concat('style.min.css')).pipe(gulp.dest(DEST+'css')).pipe(browserSync.stream()); }else{gulp.src('src/less/*.less') //或者用['src/less/p1.less','src/less/p2.less'].pipe(less()).pipe(minifyCSS()).pipe(concat('style.min.css')).pipe(gulp.dest('src/css')).pipe(browserSync.stream());} }); gulp.task('minify-html', function(){gulp.src(HTML_PATH).pipe(changedInPlace({firstPass: true})).pipe(minifyHTML({collapseWhitespace: true})).pipe(gulp.dest(DEST)).pipe(browserSync.stream()); }); gulp.task('clean', function () {gulp.src(['./src/css/*.css','./src/js/*.js'], {read: false}).pipe(clean()); }); var files = ['./src/css/*.css','./src/js/*.js' ]; gulp.task('browser-sync', function(){browserSync.init(files,{server: {baseDir: './'},port: 9999}); }); gulp.task('watch', function() {gulp.watch('./src/source/*.js',['minify-js']);gulp.watch('./src/less/*.less',['minify-css']); }); if(argv.p){//productgulp.task('default', sequence('minify-js','minify-css','minify-html','browser-sync')); }else{//developgulp.task('default', sequence('clean','minify-js','minify-css','watch','browser-sync')); }

4.擴展

（1）上面一堆require看著好煩人，也很龐大。此處可以引入“gulp-load-plugins”插件

var gulpLoadPlugins = require('gulp-load-plugins'),plugins = gulpLoadPlugins();plugins.uglify();即可執行相應任務

（2）若某個文件夾下好多文件，那么watch監聽時需要一一列舉，可以目錄寫成json格式（例如src.source.*.js）。通過引入“fs”插件，用fs.freaddirSync()方法去讀路徑。循環即可，此處的實現純屬寫js代碼。

?

　　

　　

轉載于:https://www.cnblogs.com/lixuemin/p/5611690.html

總結

以上是生活随笔為你收集整理的gulp配置实现修改js、css、html自动刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。