网站建设的公司太多了,建设部资质升级网站,色彩 导航网站,网站建设的步骤以及流程写在前面#xff1a; 本配置支持es6、less、react 1.首先 给出初始的目录结构 给出执行gulp后的目录结构 给出执行gulp --p后的目录结构 2.package.json里是一个写入。文件描述了npm包的相关配置信息#xff08;作者、简介、包依赖等#xff09;和所需模块。 {name 本配置支持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(DESTjs))}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(DESTcss)).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
