项目地址:

https://github.com/crperlin/StartFrontendProject

任务队列

编译SCSS -> CSS
AMD文件优化
压缩JS/HTML/CSS/图片
合并文件
JS语法检测
添加后缀名
浏览器实时预览更新
清除文件
ES6文件转换
雪碧图生成

Gulpfile.js

/*** cnpm install gulp imagemin-svgo gulp-notify  gulp-babel babel-preset-es2015 gulp.spritesmith vinyl-buffer gulp-csso gulp-amd-optimizer  gulp-plumber gulp-notify  gulp-sourcemaps gulp-jshint  gulp-uglify gulp-sass gulp-cssnano gulp-autoprefixer  gulp-ifnpm gulp-size gulp-concat gulp-rimraf gulp-rename gulp-postcss gulp-scss-lint gulp-imagemin browser-sync --save-dev*/
'use strict';
var gulp = require('gulp'),                                                          //gulpsass         = require('gulp-sass'),                                             //sass编译concat       = require('gulp-concat'),                                           //合并JSuglify       = require('gulp-uglify'),                                           //压缩JScssnano      = require('gulp-cssnano'),                                          //压缩CSSimagemin     = require('gulp-imagemin'),                                         //压缩图片pngquant     = require('imagemin-pngquant'),                                     //深度压缩图片autoprefixer = require('gulp-autoprefixer'),                                     //自动补齐前缀rimraf       = require('gulp-rimraf'),                                           //清除文件rename       = require('gulp-rename'),                                           //重命名plumber      = require('gulp-plumber'),                                          //错误提示amdOptimize  = require('gulp-amd-optimizer'),                                    //requirejs 压缩sourcemaps   = require('gulp-sourcemaps'),                                       //sourcemapsspritesmith  = require('gulp.spritesmith'),                                      //雪碧图bf           = require('vinyl-buffer'),                                          //流缓存csso         = require('gulp-csso'),                                             //css压缩merge        = require('merge-stream'),                                          //合并流babel        = require('gulp-babel'),                                            //es6转化为es5jshint       = require('gulp-jshint'),                                           //js语法检测notify       = require('gulp-notify'),                                           //消息提示bs           = require('browser-sync').create(),                                 //即时预览bs_reload    = bs.reload;                                                        //即时预览重载/*** 路径变量( s => source , d => distribute , o => other project)*/
var current = false,                                                                 //变化路径的开关,true开启,false关闭o_dist = 'F://LQH/WORK/Anzipay-mall/oneyuan/',                                   //其他项目的根目录o_css = o_dist + 'dist/css/',                                                    //其他项目下的CSSo_js = o_dist + 'dist/js/',                                                      //其他项目下的JSo_img = o_dist + 'dist/img/',                                                    //其他项目下的IMGo_mod = o_dist + 'dist/mod/',                                                    //其他目录下的模块path = {     s_sass      : "webstart/build/scss/",                                              //待编译的源文件路径s_css       : "webstart/build/css/",s_js        : "webstart/build/js/",s_es        : "webstart/build/es6/",                                                 //待转换的ES6文件s_img       : "webstart/build/img/",                                                //待压缩的图片s_simg      : "webstart/build/img/sprite/",                                        //待合并成雪碧图的文件dist        : "webstart/dist/",d_css       : "webstart/dist/css/",                                                 //输出的文件d_img       : 'webstart/dist/img/',d_js        : 'webstart/dist/js/',server_root : ["webstart", "webstart/static"],o_dist      : o_dist,o_css       : o_css,                                                                //其他项目输出文件o_js        : o_js,o_img       : o_img,o_mod       : o_mod,selectPath  : function (current) {                                             //开始替换路径if (current) {   path.d_css       = path.o_css;path.d_img       = path.o_img;path.d_js        = path.o_js;path.d_mod       = path.o_mod;path.server_root = path.o_dist;                                      //本地服务器启动根目录}}};
path.selectPath(current);/*** sass 语法检测及文件处理*/
gulp.task('scss_2_css', function () {gulp.src(path.s_sass + '**/*.scss').pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(sass.sync().on('error', sass.logError)).pipe(gulp.dest(path.s_css));
});//脚本检查
gulp.task('lint', function () {gulp.src(path.d_js + '**/*.js').pipe(jshint()).pipe(jshint.reporter('default')).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});/*** 压缩css*/
gulp.task('cssmin', function () { //执行完sass再执行cssminreturn gulp.src(path.s_css + '**/*.css').pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(sourcemaps.init()) //sourcemapr入口.pipe(autoprefixer({ //浏览器前缀browsers: ['last 2 versions'],cascade: false})).pipe(rename({// dirname: "main/text/ciao",   //目录名// basename: "aloha",           //基本命名// prefix: "bonjour-",          //前缀suffix: ".min" //后缀// extname: ".md"               //拓展名})).pipe(cssnano()).pipe(sourcemaps.write('.')) //保存到输出map.pipe(gulp.dest(path.d_css)).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});/*** 压缩js*/
gulp.task('uglify', function () {return gulp.src(path.s_js + '**/*.js') //'!src/static/js/main/*js' 不压缩.pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(rename({// dirname: "main/text/ciao",   //目录名// basename: "aloha",           //基本命名// prefix: "bonjour-",          //前缀suffix: ".min" //后缀// extname: ".md"               //拓展名})).pipe(uglify({mangle: true, //类型：Boolean 默认：true 是否修改变量名compress: true //类型：Boolean 默认：true 是否完全压缩})).pipe(gulp.dest(path.d_js)).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});/*** 图片压缩*/
gulp.task('imagemin', function () {return gulp.src(path.s_img + '*').pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(imagemin({progressive: true,svgoPlugins: [{removeViewBox: false}],use: [pngquant()]})).pipe(gulp.dest(path.d_img)).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});//雪碧图
gulp.task('sprite', function () {// Generate our spritesheetvar spriteData = gulp.src(path.s_simg+'*.png').pipe(spritesmith({imgName: 'sprite.png',cssName: 'sprite.css'}));// Pipe image stream through image optimizer and onto diskvar imgStream = spriteData.img// DEV: We must buffer our stream into a Buffer for `imagemin`.pipe(bf()).pipe(imagemin())           //压缩合并的图片.pipe(gulp.dest(path.d_img));// Pipe CSS stream through CSS optimizer and onto diskvar cssStream = spriteData.css//.pipe(csso())       //压缩CSS.pipe(gulp.dest(path.d_css));// Return a merged stream to handle both `end` eventsreturn merge(imgStream, cssStream);
});/*** 清空图片、样式、js*/
gulp.task('rimraf', function () {return gulp.src([path.d_css + '**/*',path.d_js + '**/*'], {read: false}) // much faster.pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(rimraf({force: true})).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});/***AMD 模块压缩*/
gulp.task('amdop', function () {return gulp.src(path.d_js + '**/*.js', {base: amdConfig.baseUrl}).pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(sourcemaps.init()).pipe(amdOptimize(amdConfig)).pipe(concat('modules.js')).pipe(sourcemaps.write('./')).pipe(gulp.dest(path.d_js)).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});
var amdConfig = {baseUrl: '/oneyuan/dist/lib/',path: {jQuery         : "jquery/dist/jquery.min",bootstrap      : "bootstrap/dist/js/bootstrap.min",validation     : "jquery-validation/dist/jquery.validate.min",es6            : 'requirejs-babel/es6',babel          : 'requirejs-babel/babel-5.8.34.min',echarts        : 'ech arts/dist/echarts.min',pagin          : 'pagin',slider         : 'superslider/js/jquery.SuperSlide.2.1.1',countdown      : '../js/countdown',indexCountdown : '../js/indexCountdown',lodash         : 'lodash/lodash.core'},exclude: ['jQuery']
};/***本地服务器*/
gulp.task('serve', function () {// 从这个项目的根目录启动服务器bs.init({server: {baseDir: [path.server_root+""] //本地服务器目录},port:8085});gulp.watch([path.server_root + '**/*.html', path.d_css + '**/*.css', path.s_img + '*', path.d_js + '**/*.js']).on("change", bs_reload);
});/*** 默认任务 运行语句 gulp*/
gulp.task('default', ['watch','rimraf'], function () {return gulp.start('scss_2_css', 'cssmin', 'uglify', 'imagemin', 'serve','sprite');
});/***  ES6 转化为ES5*/
gulp.task('es6_2_es5', function() {return gulp.src(path.s_es+'**/*.js').pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")})).pipe(sourcemaps.init()).pipe(babel({presets: ['es2015']}))//.pipe(concat('all.js')).pipe(sourcemaps.write('.')).pipe(gulp.dest(path.d_js)).pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});/*** 监听任务 运行语句 gulp watch*/
gulp.task('watch', function () {// 监听sassgulp.watch(path.s_sass + '**/*.scss', ['scss_2_css']);// 监听cssgulp.watch(path.s_css + '**/*.css', ['cssmin']);// 监听imagesgulp.watch(path.s_img + '*', ['imagemin']);//监听ES6 JSgulp.watch(path.s_es+'**/*.js',['es6_2_es5']);// 监听jsgulp.watch(path.d_js + '**/*.js', ['uglify']);});

结束语

有兴趣的小伙伴可以frok或者star一下,有完善的请提交~~~o(∩_∩)o

Gulp折腾记 - （3）常用任务构建的demo[改进版]相关推荐

Gulp折腾记 - （2）常用任务构建的demo
项目地址: Github: https://github.com/crperlin/StartFrontendProject 构建任务范围编译SASS/SCSS -> CSS CSS 逆转换为 ...
Docker折腾记: (3)Docker Compose构建Gitlab,从配置(https,邮箱验证)到基本可用
前言 gitlab 11.1内置了CI/CD,这个特性从gitlab 8+就开始有了,不过配置比较琐碎经过几个大版本的迭代,现在已经简化了使用方式,也修复了一些坑,这个特性大大吸引了我; gitla ...
VS Code折腾记 - (4) 常用必备插件推荐【前端】
前言这篇文章只要让你做一些基础的配置,把vscode变得更加顺手: 插件的需求不是一成不变,比如在新版就已集成的就可以移除了. 必备插件功能性 Auto Close Tag : 匹配标签,关闭对应 ...
Spring Boot 实践折腾记（11）：使用 Spring 5的WebFlux快速构建效响应式REST API
关于Spring 5中的反应式编程支持Reactor类库,上一篇文章< Spring Boot 实践折腾记(10):2.0+版本中的反应式编程支持--Reactor>已经简要介绍过,Spr ...
React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react ...
第二空间计算机最新破解,我的J4125黑群晖折腾记 - 软件篇：无需U盘引导及固态硬盘扩充空间容量法...
我的J4125黑群晖折腾记 - 软件篇:无需U盘引导及固态硬盘扩充空间容量法 2020-10-16 18:33:49 53点赞 418收藏 25评论 [前言]:继上一篇<我的J4125黑群晖折腾 ...
Ubuntu子系统折腾记
文章目录 Ubuntu子系统折腾记让WSL代替cmd和PowerShell 将Ubuntu子系统放到桌面操作Windows上的硬盘文件调用Windows中安装的Python 搭载Windows ...
HUAWEI 擎云L420 折腾记（搭建arm gcc、openocd 雅特力 MCU开发环境）
HUAWEI 擎云L420 折腾记前言 1. java 环境 2. python 3. C++/C 4. arm-gcc-none-eabi mcu开发 5. 雅特力修改的atlink版 openo ...
React 16.x折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理,有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react(用起来感觉良好的状 ...

Gulp折腾记 - （3）常用任务构建的demo[改进版]

项目地址:

任务队列

Gulpfile.js

结束语

Gulp折腾记 - （3）常用任务构建的demo[改进版]相关推荐

最新文章

热门文章