基于NodeJs Gulp配置案例
来源：互联网 发布：ppt是什么意思网络用语 编辑：程序博客网 时间：2024/05/18 01:10
'use strict';const gulp = require('gulp');//const jshint = require('jshint');const $ = require('gulp-load-plugins')();const del = require('del');const merge = require('merge-stream');const runSequence = require('run-sequence');const amdOptimize = require('amd-optimize');const argv = require('minimist')(process.argv.slice(2));const fs = require('fs');// 设置参数const RELEASE = !!argv.release; // 是否在构建时压缩和打包处理const DEMO = !!argv.demo; // 是否在构建Demo环境const AUTOPREFIXER_BROWSERS = [ // autoprefixer 配置 'ie >= 10', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 4.4', 'bb >= 10'];console.log('release =', RELEASE);console.log('demo =', DEMO);const src = { assets: 'assets/**/*', images: 'images/**/*', pages: 'pages/**/*', data: 'data/**/*', styles: ['styles/bootstrap.less', 'styles/partials/**/*.{css,less}', 'styles/**/**'], scripts: ['scripts/**/*.js', '!scripts/**/*.min.js', 'scripts/**/*.min.js', 'scripts/**/*.json', 'scripts/**/**']};const pkgs = require('./package.json').dependencies;gulp.task('default', ['server'], function () { gulp.start('help');});// 清除gulp.task('clean', del.bind(null, ['build/*'], {dot: true}));// 第三方插件管理gulp.task('vendor', function () { return merge( gulp.src('node_modules/jquery/dist/*.*') .pipe(gulp.dest('build/js/vendor/jquery')), gulp.src('node_modules/bootstrap/dist/js/*.*') .pipe(gulp.dest('build/js/vendor/bootstrap')) );});// 静态资源文件gulp.task('assets', function () { return gulp.src(src.assets) .pipe(gulp.dest('build'));});// 图片gulp.task('images', function () { return gulp.src(src.images) .pipe($.plumber({errorHandler: $.notify.onError('images Error: <%= error.message %>')})) //.pipe($.cache($.imagemin({ // progressive: true, // interlaced: true //}))) //.pipe($.imagemin({ // progressive: true, // interlaced: true //})) .pipe($.changed('build/images')) .pipe(gulp.dest('build/images'));});// 字体gulp.task('fonts', function () { return gulp.src('node_modules/bootstrap/fonts/**') .pipe(gulp.dest('build/fonts'));});// 在线帮助的文件gulp.task('onlinehelp', function () { return gulp.src('onlinehelp/**/*.*') .pipe(gulp.dest('build/onlinehelp'));});// HTML 页面gulp.task('pages', function () { return gulp.src(src.pages) .pipe($.plumber({errorHandler: $.notify.onError('pages Error: <%= error.message %>')})) .pipe($.ejs({}, {ext: '.html'})) .pipe($.changed('build', {extension: '.html'})) .pipe(gulp.dest('build'));});// CSS 样式gulp.task('styles-base', function () { return gulp.src('styles/bootstrap.less') //return gulp.src(src.styles[0]) .pipe($.plumber({errorHandler: $.notify.onError('styles Error: <%= error.message %>')})) .pipe($.if(!RELEASE, $.sourcemaps.init())) .pipe($.less()) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe($.csscomb()) .pipe(RELEASE ? $.cssmin() : $.util.noop()) //.pipe($.cssmin()) .pipe($.rename('style.css')) //.pipe($.if(!RELEASE, $.sourcemaps.write())) .pipe($.changed('build/css', {extension: '.less'})) .pipe(gulp.dest('build/css'));});gulp.task('styles', function () { //return gulp.src('styles/bootstrap.less') return gulp.src(src.styles[1]) .pipe($.plumber({errorHandler: $.notify.onError('styles Error: <%= error.message %>')})) //.pipe($.if(!RELEASE, $.sourcemaps.init())) .pipe($.less()) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe($.csscomb()) .pipe(RELEASE ? $.cssmin() : $.util.noop()) //.pipe($.cssmin()) //.pipe($.rename('style.css')) //.pipe($.if(!RELEASE, $.sourcemaps.write())) .pipe($.changed('build/css/partials', {extension: '.less'})) .pipe(gulp.dest('build/css/partials'));});// JavaScriptgulp.task('scripts', function () { return gulp.src(src.scripts.slice(0, 1)) //.pipe(jshint()) // 进行js静态检查 //.pipe(jshint.reporter('default')) // 对js代码进行报错提示 .pipe($.plumber({errorHandler: $.notify.onError('scripts Error: <%= error.message %>')})) //.pipe($.if(!RELEASE, $.sourcemaps.init())) .pipe($.if(RELEASE, $.uglify({mangle: false}))) //.pipe($.rename({suffix:'.min'})) //.pipe($.if(!RELEASE, $.sourcemaps.write())) .pipe($.changed('build/js')) .pipe(gulp.dest('build/js'));});gulp.task('unscripts', function () { return gulp.src(src.scripts.slice(2)) .pipe($.plumber({errorHandler: $.notify.onError('unscripts Error: <%= error.message %>')})) //.pipe($.if(!RELEASE, $.sourcemaps.init())) //.pipe($.if(RELEASE, $.uglify({ mangle: false }))) //.pipe($.if(!RELEASE, $.sourcemaps.write())) .pipe($.changed('build/js')) .pipe(gulp.dest('build/js'));});// Buildgulp.task('build', ['clean'], function (cb) { if (DEMO) { runSequence(['pages', 'assets', 'vendor', 'images', 'fonts', 'styles-base', 'styles', 'unscripts', 'scripts', 'MockData', 'onlinehelp'], cb); } else { runSequence(['pages', 'assets', 'vendor', 'images', 'fonts', 'styles-base', 'styles', 'unscripts', 'scripts', 'onlinehelp'], cb); }});// MockDatagulp.task('MockData', function () { let baseUrl = 'data'; let appendData = ''; let mockJsFile = './scripts/plugins/mockData/MockData.js'; let files; fs.writeFileSync(mockJsFile, 'define( [ \'plugins/mockData/mock-min\'], function (Mock) {\n' + 'var errorData = {"success": false,"data": null,"failCode": 404,"params": null,"message": "没有找到此文件"};\n', 'utf8'); //同步写入 if (fs.existsSync(baseUrl)) { //获取目录下的文件 files = fs.readdirSync(baseUrl); for (var i = 0, fileLen = files.length; i < fileLen; i++) { var _thisFile = files[i]; var objName = _thisFile.replace('.js', ''); var requireFile = "./" + baseUrl + "/" + objName; var _thisObj = require(requireFile); for (var item in _thisObj) { var _thisTemplate = _thisObj[item]; if (typeof _thisObj[item] === "object") { _thisTemplate = JSON.stringify(_thisTemplate); } appendData = 'Mock.mock("/' + objName + '/' + item + '",' + _thisTemplate + ');\n'; fs.appendFileSync(mockJsFile, appendData, 'utf8'); } } imageFunc(); var reg = /^\//; fs.appendFileSync(mockJsFile, '\n $.ajaxPrefilter(function (options, originalOptions, jqXHR) { if((options.type).toUpperCase() == \'GET\'){options.cache = true;} (!(' + reg + '.test(options.url))) && (options.url = "/" + options.url)});\n ' + '\n var tokenId = parseInt(1000000000*Math.random()); ' + '\n return {config: {isMock: true,login: function (user) {' + 'tokenId && Cookies.set(\'tokenId\', tokenId);' + 'if (user) {' + 'Cookies.set(\'userName\', user.userName);' + 'Cookies.set(\'loginName\', user.loginName);' + 'Cookies.set(\'userid\', user.userid);' + 'Cookies.set(\'userType\', user.userType);' + '}' + '}}};\n});', 'utf8'); //createStreamFile(); } else { console.log(baseUrl + " Not Found!"); } function imageFunc() { var srtImgFun = '\n var regArr = [".jpg",".gif",".svg",".png"];' + '//var reg=/^?(\.jpg|\.png|\.gif|\.svg)$/;\n' + 'var imgs= $("img");' + 'if(imgs.length){' + '$.each(imgs,function(index,item){' + 'var thisImgSrc = $(item).attr("src");' + 'console.log(thisImgSrc);' + 'var thisImgSrcType = $(item).attr("src").slice(-4);' + 'if(thisImgSrcType.indexOf(regArr)<0){' + '$.get(thisImgSrc,function(result){' + 'console.log(result);' + 'var data = JSON.parse(result);' + '$(item).attr("src",data.imageUrl);' + '/*$(item).attr("src", eval(result));*/' + '})' + '}' + '}' + ')}'; fs.appendFileSync(mockJsFile, srtImgFun, 'utf8'); }});// 运行 BrowserSyncgulp.task('server', ['build'], function () { var path = require('path'); var url = require('url'); var fs = require('fs'); var browserSync = require('browser-sync'); var proxyMiddleware = require('http-proxy-middleware'); var Mock = require('mockjs'); var uuid = require('uuid'); var middleware = []; var isMock = DEMO; if (isMock) { middleware = function (req, res, next) { var urlObj = url.parse(req.url, true), method = req.method, query = urlObj.query, mockUrl; var body = ''; req.on('data', function (data) { body += data; }); req.on('end', function () { if (urlObj.pathname.match(/\..+$/) || urlObj.pathname.match(/\/$/)) { next(); return; } body = body || JSON.stringify(query); console.log('[requist] ', method, urlObj.pathname, body); var dataUrl = 'data'; var pathTree = urlObj.pathname.split('/'); var mockDataFile = path.join(__dirname + path.sep + dataUrl, path.sep + pathTree[1]) + ".js"; //file exist or not fs.access(mockDataFile, fs.F_OK, function (err) { var isImage = req.headers.accept.indexOf('image') != -1; if (err) { var c = { "success": false, "data": null, "failCode": 404, "params": null, "message": "无响应数据", "notFound": mockDataFile }; //console.log('[response] ', c); res.setHeader('Content-Type', (isImage ? 'image/*' : 'application/json')); res.end(JSON.stringify(c)); next(); return; } try { delete require.cache[require.resolve(mockDataFile)]; var data = require(mockDataFile) || {}; var result, mockUrl = pathTree[2]; if (data[mockUrl] && typeof data[mockUrl] === "object") { result = Mock.mock(data[mockUrl]); } else if (typeof data[mockUrl] === 'function') { var options; try { options = {body: JSON.parse(body)}; } catch (e) { options = {body: JSON.parse('{"' + body.replace(/=/g, '":"').replace(/&/g, '","') + '"}')}; } result = Mock.mock(data[mockUrl](options || {})); } isImage && (result = Mock.Random.image(data[mockUrl])); res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Content-Type', (isImage ? 'image/*' : 'application/json')); res.setHeader('tokenId', uuid.v1()); var s = result || { "success": false, "data": null, "failCode": 0, "params": null, "message": null }; //console.log('[response] ', JSON.stringify(s)); res.end(JSON.stringify(s) || s); } catch (e) { console.error(e); } }); }); //next(); }; } else { var host = 'http://127.0.0.1:8080'; middleware = [ proxyMiddleware(['/app'], {target: host, changeOrigin: true}) ]; } browserSync({ //files: '/build/**', //监听整个项目 open: false, // 'external' 打开外部URL, 'local' 打开本地主机URL //https: true, port: 80, online: false, notify: false, logLevel: "info", logPrefix: "iems mock", logConnections: true, //日志中记录连接 logFileChanges: true, //日志信息有关更改的文件 scrollProportionally: false, //视口同步到顶部位置 ghostMode: { clicks: false, forms: false, scroll: false }, server: { baseDir: './build', middleware: middleware } }); gulp.watch(src.assets, ['assets']); gulp.watch(src.images, ['images']); gulp.watch(src.pages, ['pages']); gulp.watch(src.data, ['MockData']); gulp.watch(src.styles, ['styles-base', 'styles']); //gulp.watch(src.styles[2], ['styles']); gulp.watch(src.scripts[4], ['unscripts', 'scripts']); gulp.watch('./build/**/*.*', function (file) { browserSync.reload(path.relative(__dirname, file.path)); });});gulp.task('help', function () { console.log(' gulp build 文件发布打包'); console.log(' gulp assets 静态资源文件发布'); console.log(' gulp images 图片文件发布'); console.log(' gulp pages html（模板）页面文件发布'); console.log(' gulp styles css（less）层叠样式文件发布'); console.log(' gulp scripts JavaScript脚本文件发布'); console.log(' gulp help gulp参数说明'); console.log(' gulp server 测试server'); console.log(' gulp --demo DEMO环境'); console.log(' gulp --deploy 生产环境（默认生产环境）'); console.log(' gulp --release 开发环境');});
阅读全文
0 0
- 基于NodeJs Gulp配置案例
- 基于Nodejs的自动化工具Gulp
- 基于Nodejs的自动化工具Gulp学习
- nodejs+gulp
- 基于nodejs配置vue工程
- NodeJS+Gulp+Browser-sync
- nodejs gulp入门
- nvm 安装nodejs &gulp
- gulp 配置
- gulp配置
- 配置gulp
- nodejs+npm+gulp使用入门教程
- nodejs在window环境下的安装配置和gulp命令的安装
- nodejs在window环境下的安装配置和gulp命令的安装
- 基于XML配置的springMVC小案例
- 基于注解配置的springMVC小案例
- Mybatis基于xml配置的入门案例
- [Nodejs]Gulp + Browserify: The Everything Post
- form标签中的target属性学习
- PCL入门<四>根据向量做点云旋转
- Spring事务的传播特性以及事务的隔离级别
- 因Kubernetes漏洞导致银行应用瘫痪1小时，事件细节回顾和分析
- 给定n个非负整数a1，a2，...，an， 找到两条线，它们与x轴一起形成的容器面积最大
- 基于NodeJs Gulp配置案例
- Eclipse的常用快捷键
- [干货来袭]DevExpress ASP.NET示例资源最全分享！（二）
- fsm(有限状态机）入门笔记
- 第6章 copssh
- 【译】Spring官方教程：使用STS的入门指南
- CSS基础学习（1）
- AIX /etc/filesystems困惑
- 社区头条：Spring For All 新版上线了！！！
