前后端分离+本地服务实时刷新+缓存管理+接口proxy+静态资源增量更新+各种性能优化+上线运维发布——gulp工作流搭建
技巧集:http://www.gulpjs.com.cn/docs/recipes/
其实无非就是利用各种gulp插件、node脚本对项目文件做各种IO操作,只是备忘,需要的话,还是自己重新写最合适。
1. 一个justwork的多页应用工作流
毛病:如果需要task之间的同步依赖关系,那么上一个task function里面需要有return;各个task的依赖,应该用gulpSequence做拉平。
var gulp = require('gulp'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer'), browserSync = require('browser-sync').create(), open = require('gulp-open'), del = require('del'), usemin = require('gulp-usemin'), // useref = require('gulp-useref'),// 这个相对目录有问题 妈的 不用了 zip = require('gulp-zip'), gulpRevAll = require('gulp-rev-all'), revReplace = require("gulp-rev-replace"), uglify = require('gulp-uglify'), minifyCss = require('gulp-minify-css'), Replace = require('gulp-replace'), htmlmin = require('gulp-htmlmin'), gulpSequence = require('gulp-sequence'), argv = require('yargs').argv; // node命令传入的参数整合参数 /**************************配置项**************************/ var _opt = { src: 'app/', // src: 'dist/sce/app/', // devHost:"sns-operating-dev.sohuno.com", // devHost: "dev.w.sohu.com", //默认当前局域网ip // startPath: '/view/intro.html', startPath: '/view/index.html', dest: 'dist/', tem: 'tem/', revDelay: 5, //单位秒 staticInCDN: true, //默认放cdn cdnPath: '//sns_business.cdn.sohusce.com/square-unlogin-v3/', // staticProxyPath: '/h5static/',//需要代理的静态资源路径标记 sce: { // releaseUrl: 'http://fe.w.sohu.com/h5apps/sns-square-test/view/intro.html', //线上或测试环境的项目url manageUrl: '//console.sce.sohuno.com/apps/versions?appid=', path: 'sce/', yamlPath: 'sce/app.yaml', appPath: 'sce/app/', confPath: 'sce/conf/', test: { //暂仅测试环境 这里需要优化配置 gulp发布的时候带上环境参数 如gulp r --test/product appId: 212250773, sceHost: '//sns-square-unlogin-v30-test.sce.sohuno.com', backendHost: { 'sns-core': 'sns-api.apps.sohuno.com', //sns-data-api-test.sce.sohuno.com sns-api.apps.sohuno.com msapi.t.sohu.com // 'sns-data':'sns-data-api-test.sce.sohuno.com' } }, product: { appId: 985464923, sceHost: '//sns-square-unlogin-v30.sce.sohuno.com', backendHost: { 'sns-core': 'sns-api.apps.sohuno.com', // 'sns-data':'sns-data.sohuno.com' } } } }; /**************************本地开发Server**************************/ var _env = _opt.sce[Object.keys(argv)[1]] ? Object.keys(argv)[1] : 'test'; console.log("● serverPath:" + _opt.src); console.log("● serverEnv:" + _env); // 静态服务器 gulp.task('serve', ['sass'], function() { var proxyMiddleware = require('http-proxy-middleware'); var proxy = proxyMiddleware(['/sns-core'], { target: 'http://' + _opt.sce[_env].backendHost['sns-core'], pathRewrite: { '^/sns-core/(.*)': '/$1' }, changeOrigin: true, headers: { host: _opt.sce[_env].backendHost['sns-core'], origin: 'http://' + _opt.sce[_env].backendHost['sns-core'] } }); //禁止开发server的缓存 var proxyNoCache = function(req, res, next) { res.setHeader('CacheControl', 'no-cache'); res.setHeader('Pragma', 'no-cache'); res.setHeader('Expires', '-1'); res.setHeader('ETag', Date.now()); //禁止304 next(); } browserSync.init({ server: { baseDir: _opt.src //_opt.dest//''//''// _opt.dest,//_opt.dest src }, ui: { port: 3030 }, host: _opt.devHost, //hosts文件设置代理到开发机IP server种cookie用 open: "external", // startPath: _opt.startPath, ghostMode: false, //关掉多设备同步 middleware: [proxy, proxyNoCache] }); gulp.watch(_opt.src + "/static/scss/*.scss", ['sass']); gulp.watch([_opt.src + "/static/js/**", _opt.src + "/static/img/**", _opt.src + "/**/*.html" ]).on('change', browserSync.reload); }); // gulp.task('rrr', function() { // return gulp.src([_opt.src + "/static/scss/sns-base.scss"], { // base: _opt.src + "/static/scss/" // }) // .pipe(Replace(/\n[\t\u0020]*?\/\/.+?\n/g,"\n\n")) // .pipe(gulp.dest(_opt.src + "/static/acss/")) // }); gulp.task('sass', function() { var postPlugins = [ autoprefixer() //browserlist read from package.json //取值https://github.com/ai/browserslist#queries ]; return gulp.src([_opt.src + "/static/scss/**/*.scss"], { base: _opt.src + "/static/scss/" }) // auto append night mode(.night),color base scss/_const.scss // 以后抽象成一个插件 // 最好的实现不是预先删除注释,而应该是不去替换注释里的夜色才对 @20180119 // 有个bug 启动的时候可以注掉 修改scss后的reload任务不好使 // 干掉scss中的注释 避免下面的夜色模式替换 把注释里的也给替换了导致scss结构错乱报错 .pipe(Replace(/([\s;])\/\/.+?(?=\n)/g, function(s, m1) { //删掉空字符或者;后面的单行注释内容; //这个正则引擎 不支持肯定逆序表达式 (?<=[\s;]) 只能function return m1了 return m1; })) .pipe(Replace(/\/\*.+?\*\//g,''))//删掉块级注释 咦尼玛 这个怎么不好使 见main.css //_const.scss中色值变量命名 需遵循规范 $c-grey1:#000; $c-night-grey1:#454545; .pipe(Replace(/([\w-]+?\s*?\:.*\$c-.+?;)/g, function(s, m1, m2) { // console.log('----\r\n'+m1+'\r\n----\r\n'); var m1_night = m1.replace(/\$c-/g, '$c-night-'); return m1 + '\n @at-root .night &{' + m1_night + '}\n'; })) .pipe(sass()) .on('error', function(err) { console.log('Less Error!', err.message); this.emit('end'); }) .pipe(postcss(postPlugins)) .pipe(gulp.dest(_opt.src + "/static/css/")) .pipe(browserSync.reload({ stream: true })); }); // gulp.task('openUrl', function() { // console.log('----打开sce线上url,fiddler代理至本地'); // gulp.src(__filename) // .pipe(open({ uri: _opt.sce.releaseUrl, app: "chrome" })); // }); /**************************临时工具处理**************************/ //图片压缩 非尺寸 gulp.task('imgmin1', function() { var imagemin = require('gulp-imagemin'); // gulp.src(_opt.src+'/img/*.+(png)') gulp.src(_opt.src + '/static/img/**/*.png', { base: _opt.src }) .pipe(imagemin()) .pipe(gulp.dest(_opt.src)); }); /**************************打包发布正式方案**************************/ gulp.task('delDest', function() { // console.log("● 环境:"+_env); var path = _opt.dest; console.log('----清空目录' + path); return del(path); }); gulp.task('tem', ['delDest'], function() { var path = _opt.tem; console.log('----清空目录' + path); return del(path); }); gulp.task('delTem', function() { var path = _opt.tem; console.log('----清空目录' + path); return del(path); }); gulp.task('delSceApp', function() { var path = _opt.sce.appPath; console.log('----清空目录' + path); return del(path); }); // 拷贝文件 gulp.task('copy2tem', ['delDest', 'delTem', 'sass'], function() { console.log('----拷贝文件到临时文件夹'); return gulp.src([ _opt.src + '/static/**', _opt.src + '/view/**', '!' + _opt.src + '/static/scss/**' ], { base: _opt.src }) .pipe(gulp.dest(_opt.tem)); }); // 合并 gulp.task('usemin', ['copy2tem'], function() { // return gulp.src([ _opt.tem + 'view/**/*.html' ], { base: _opt.tem }) .pipe(usemin({ //成功的先不上报处理了 jsAttributes: { // onload: 'window.srcLoadLog && srcLoadLog(this)', onerror: 'window.srcErrorLog && srcErrorLog(this)' }, cssAttributes: { // onload: 'window.srcLoadLog && srcLoadLog(this)', onerror: 'window.srcErrorLog && srcErrorLog(this)' } })) .pipe(gulp.dest(_opt.tem)); }); //js压缩 gulp.task('jsmin', ['usemin'], function() { console.log('----压缩js'); return gulp.src([ _opt.tem + '/static/js/**/*.js', '!' + _opt.tem + '/static/js/**/*.min.js' ], { base: _opt.tem }) // .pipe(uglify()) .pipe(uglify({ compress: { // "quote-keys":true//ie8 // properties:false, drop_console: true } // quote_keys: true // beautify : { beautify: false, ascii_only: true, quote_keys: true } })) .pipe(gulp.dest(_opt.tem)); }); //css压缩 gulp.task('cssmin', ['usemin'], function() { console.log('----压缩CSS'); return gulp.src([ _opt.tem + '/static/css/**/*.css', '!' + _opt.tem + '/static/css/*.min.css' ], { base: _opt.tem }) .pipe(minifyCss()) .pipe(gulp.dest(_opt.tem)); }); // 加MD5戳 gulp.task('revAll', ['jsmin', 'cssmin'], function() { // console.log('----加MD5戳&替换相互引用(延时' + _opt.revDelay + 's后进行下一任务)'); // var revAll = new RevAll({ // dontRenameFile: [/^\/static\/img\/ad-avatar/]//ad-avatar前端不直接用 手动替换后上传cdn给server下发用 // // ,dontGlobal:[] // // ,dontSearchFile:[/^\/static\/js\//]//dontSearchFile 对js/xx/下的路径文件 不做内容中的引用替换处理 // }); gulp.src([_opt.tem + '/*/**'], { ///static/** base: _opt.tem }) .pipe(gulpRevAll.revision({ dontRenameFile: [/^\/view\//, /^\/static\/img\/ad-avatar/] //ad-avatar前端不直接用 手动替换后上传cdn给server下发用 // ,dontGlobal:[] , dontSearchFile: [/^\/static\/js\//] //dontSearchFile 对js/xx/下的路径文件 不做内容中的引用替换处理 })) .pipe(gulp.dest(_opt.tem)) .pipe(gulpRevAll.versionFile()) .pipe(gulp.dest(_opt.tem)) .pipe(gulpRevAll.manifestFile()) .pipe(gulp.dest(_opt.tem)); }); //htmlmin gulp.task('htmlmin', function() { // console.log('----htmlmin'); return gulp.src([ _opt.tem + '/**/*.html' // '!'+_opt.dest+'/tpls/write/write.html' ], { base: _opt.tem }) .pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyCSS: true, minifyJS: true })) .pipe(gulp.dest(_opt.tem + '/')); }); //加cdn前缀 gulp.task('cdnPre', ['htmlmin'], function() { if (!_opt.staticInCDN) return false; console.log('----加CDN前缀'); return gulp.src([ _opt.tem + '/**/*.html' // ,_opt.dest + '/static/js/common/myLib.*.js' ], { base: _opt.tem }) //下面日后写成通配符严格匹配 path/**.xxx 上面的js就可以写成all js了 .pipe(Replace(/"[./]*static\//g, '"' + _opt.cdnPath)) //有点风险 日后优化 .pipe(gulp.dest(_opt.tem + '/')); }); //imgmin - 这个任务时间太长 依赖建立不起来,r完了还会在压着,所以从gulp 抽成单独一项任务,gulp serve前手动搞 // gulp.task('imgmin',['copy2tem'], function() { // var imagemin = require('gulp-imagemin'); // // gulp.src(_opt.src+'/img/*.+(png)') // gulp.src(_opt.tem + '/static/img/**/*.png', { // base: _opt.tem // }) // .pipe(imagemin()) // .pipe(gulp.dest(_opt.tem)); // }); //拷贝sce基础文件至dist gulp.task('sce_base2dist', function() { console.log('----拷贝sce基础文件到发布目录'); return gulp.src([ _opt.sce.path + "/**" ], { base: _opt.sce.path }) .pipe(gulp.dest(_opt.dest + "/sce")); }); // 根据环境修改sce appId gulp.task('sceConfigInit', ['sce_base2dist'], function() { console.log('----sce配置初始化'); // return gulp.src(_opt.sce.yamlPath) return gulp.src([ _opt.dest + _opt.sce.yamlPath, _opt.dest + _opt.sce.confPath + '/nginx_server.inc' ], { base: _opt.dest }) //backendHost 下面正则优化 增强匹配的严谨性--这里以后改成写入而不是 替换是不是能好一些 .pipe(Replace(/appid: \d+/, 'appid: ' + _opt.sce[_env].appId)) .pipe(Replace(/server_sns-core(?=[;/ ])/g, _opt.sce[_env].backendHost['sns-core'])) .pipe(gulp.dest(_opt.dest)); }); // 拷贝文件 gulp.task('tem2sceDist', ['cdnPre'], function() { console.log('----拷贝项目文件到dist/sce目录'); return gulp.src([ _opt.tem + "/**", '!' + _opt.tem + 'rev-*.json' ], { base: _opt.tem }) .pipe(gulp.dest(_opt.dest + _opt.sce.appPath)); }); // 静态资源压缩zip for cdn gulp.task('static2zip', ['cdnPre'], function() { if (!_opt.staticInCDN) return false; console.log('----静态资源to zip for cdn'); var cdn_project_name = 'toCDN_' + _opt.cdnPath.match(/\/\/(.+?)\.cdn/)[1] + '_' + _opt.cdnPath.replace(/.+\.com\//, "").replace(/\//g, "") + ".zip"; // var cdn_project_name = 'toCDN_' + _opt.staticProxyPath.replace(/\//g, "") + ".zip"; return gulp.src([ _opt.tem + '/static/**' ], { base: _opt.tem + '/static/' }) .pipe(zip(cdn_project_name)) .pipe(gulp.dest(_opt.dest)); //剔除rev map文件、zip打包文件 需要优化 }); // sce项目zip gulp.task('sce2zip', ['tem2sceDist', 'sceConfigInit'], function() { console.log('----sce to zip'); var zip_name = 'sce_' + _opt.sce[_env].appId + '.zip'; return gulp.src([_opt.dest + _opt.sce.path + '/**']) .pipe(zip(zip_name)) .pipe(gulp.dest(_opt.dest)); }); //发布 gulp.task('packContinue', ['sce2zip', 'static2zip'], function() { console.log('----清除临时文件'); // 清除临时文件 del(_opt.tem); console.log('● 环境:' + _env); console.log('● 前端项目已发布到' + _opt.dest); if (_opt.staticInCDN) console.log('○ 静态资源zip请上传至:' + _opt.cdnPath); console.log('○ sce zip请上传至:' + _opt.sce.manageUrl + _opt.sce[_env].appId); console.log('● sce前端服务host:' + _opt.sce[_env].sceHost); console.log('----完成!'); }); // 发布-cdn gulp.task('r', ['revAll'], function(cb) { // console.log("----环境:"+_env); setTimeout(function() { //延时太挫 待优化 https://github.com/gulpjs/gulp/issues/96 gulpSequence('packContinue', cb); }, _opt.revDelay * 1000); //revAll 延时 }); // 发布-local gulp.task('r:local', ['revAll'], function(cb) { _opt.staticInCDN = false; // console.log("----环境:"+_env); setTimeout(function() { //延时太挫 待优化 https://github.com/gulpjs/gulp/issues/96 gulpSequence('packContinue', cb); }, _opt.revDelay * 1000); //revAll 延时 });
2. 优化迭代了多个版本的比较完美的脚手架
优点:模块化拆分、回调拉平、功能配置化
let gulp = require('gulp'), config = require('./config.js'), del = require('del'), requireDir = require('require-dir'), chalk = require('chalk'), runSequence = require('run-sequence'); console.log('Waiting For Gulp Tasks Loading ...' + '\n'); let { NODE_ENV: env, CDN: cdn } = process.env; // 递归引入gulp/tasks目录下的文件,该操作比较耗时(稍弱些的机器配置 14s左右) requireDir('./gulp/tasks', { recurse: true }); if (env !== 'dev') { console.log('\n\n/*********************** 打包开始,当前环境为:' + chalk.blue.bold(env) + ' ***********************/' + '\n'); } gulp.task('build', function(cb) { //默认不放 CDN del.sync(config.temp); del.sync(config.dist); runSequence(['svg'], ['eslint', 'ES6', 'imgMin', 'fileInclude', 'sceInit'], ['sass'], ['uncss'], ['sprite'],['jscss2dist'], ['usemin'], ['cssmin', 'jsmin', 'htmlmin'], ['revision'], ['cdnPre'], ['delRedundant'], ['zip'], ['openUrl'], function() { if (cdn === 'true') console.log('○ 静态资源zip请上传至:' + config.cdnPath); console.log('○ sce zip请上传至:' + config.sce.manageUrl + config.sce[env].appId); console.log('\n\n/*********************** 打包结束,当前环境为:' + chalk.blue.bold(env) + ' ***********************/' + '\n'); }); }) //不做jscss合并等工作 直接打包 gulp.task('build:dev', function(cb) { del.sync(config.temp); del.sync(config.dist); runSequence(['svg'], ['eslint', 'ES6', 'imgMin', 'fileInclude', 'sceInit'], ['sass'], ['sprite'],'temp2dist', ['zip'], ['openUrl'], function() { if (cdn === 'true') console.log('○ 静态资源zip请上传至:' + config.cdnPath); console.log('○ sce zip请上传至:' + config.sce.manageUrl + config.sce[env].appId); console.log('\n\n/*********************** 打包结束[纯开发包],当前环境为:' + chalk.blue.bold(env) + ' ***********************/' + '\n'); }); }) gulp.task('dev', function(cb) { del.sync(config.temp); config.buryPointSwitch = false; config.isImgOptmize = false; runSequence(['svg'], ['fileInclude', 'eslint', 'ES6', 'imgMin'], ['sass'], ['sprite'], ['dev-server'], cb); }); //打包到dist 且启动目录改到dist(用来本地测试打包后的页面运行 注:需要去dev-server改一下serverPath) gulp.task('dev:dist', function(cb) { del.sync(config.temp); config.buryPointSwitch = false; config.isImgOptmize = false; // runSequence(['svg'], ['eslint', 'ES6', 'imgMin', 'fileInclude', 'sceInit'], ['sass'], ['sprite'],'temp2dist', ['dev-server'], cb); runSequence( ['delRedundant'], ['svg'], ['eslint', 'ES6', 'imgMin', 'fileInclude', 'sceInit'], ['sass'], ['uncss'], ['sprite'], ['usemin'], ['cssmin', 'jsmin', 'htmlmin'], ['revision'],'dev-server', cb); });
转载请注明出处:http://www.cnblogs.com/youryida 欢迎留言或qq交流(1140215489)