Gulp折腾记 - （2）常用任务构建的demo

项目地址：

Github: https://github.com/crperlin/StartFrontendProject

构建任务范围

编译SASS/SCSS -> CSS
CSS 逆转换为 less / scss
压缩JS/HTML/CSS/图片
合并文件
JS语法检测
添加后缀名
浏览器实时预览更新
清除文件

Gulpfile.js

// -------------------------------------
//   Modules
// -------------------------------------
//
// gulp              : The streaming dist system
// gulp-autoprefixer : Prefix CSS
// gulp-sourcemaps   :Source map support for Gulp.js
// gulp-babel        : Turn ES6 code into vanilla ES5 with no runtime required
// gulp-concat       : Concatenate files
// gulp-cache        : A cache proxy plugin for Gulp
// gulp-eslint       : JavaScript code quality tool
// gulp-load-plugins : Automatically load Gulp plugins
// gulp-minify-css   : Minify CSS
// gulp-minify-html  : Minify html with minimize.
// gulp-filter       : Filter files in a vinyl stream
// gulp-rename       : Rename files
// gulp-sass         : Compile Sass
// gulp-if           : Conditionally run a task
// gulp-imagemin     : Minify PNG, JPEG, GIF and SVG images
// gulp-uglify       : Minify JavaScript with UglifyJS
// gulp-util         : Utility functions
// gulp-ignore       : Include or exclude gulp files from the stream based on a condition
// gulp-inject       : A javascript, stylesheet and webcomponent injection plugin for Gulp, i.e. inject file references into your index.html
// gulp-notify       : gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module. Fallbacks to Growl or simply logging
// gulp-watch        : Watch stream
// gulp-plumber      : Prevent pipe breaking caused by errors from gulp plugins
// gulp-rimraf       : rimraf plugin for gulp
// gulp-size         : Display the size of your project
// gulp-ruby-sass    : Compile Sass to CSS with Ruby Sass
// gulp-react        : Precompile Facebook React JSX templates into JavaScript
// gulp-webpack      : webpack plugin for gulp
// webpack-stream    : Run webpack as a stream to conveniently integrate with gulp.
// gulp-csscomb      : CSScomb is a coding style formatter for CSS.
// gulp-concat-css   : Concatenate css files, rebasing urls and inlining @import
// yo                : CLI tool for running Yeoman generators
// gulp-css-scss     : Gulp plugin for converting CSS to Scss.
// sprity            : Generates sprites and proper style files out of a directory of images.
// -------------------------------------//导入插件模块(import module)
var gulp = require('gulp'),gulpLoadPlugins = require('gulp-load-plugins'),bs = require('browser-sync').create(),reload = bs.reload,$ = gulpLoadPlugins({ //plugins rename pin/*gulp-load-plugins options*/rename: {'gulp-debug': 'debugger','gulp-minify-html': 'gmh','gulp-minify-css': 'gmc','gulp-rimraf': 'clean','gulp-css-scss': 'c2s'} //a mapping of plugins to rename}),pngquant = require('imagemin-pngquant'),imageminJpegtran = require('imagemin-jpegtran'),sprity = require('sprity');//目录路径(Directory Path)
var sourceDir = 'webstart/build/',imgSourceDir = sourceDir + 'img/',jsSourceDir = sourceDir + 'js/',cssSourceDir = sourceDir + 'css/',lessSourceDir = sourceDir + 'less/',scssSourceDir = sourceDir + 'scss/',coverScssSourceDir = sourceDir + 'covertSource/covert2scss/', //放进需要反编译的CSS文件coverLcssSourceDir = sourceDir + 'covertSource/covert2less/', //放进需要反编译的CSS文件coverEs6SourceDir = sourceDir + 'covertSource/covert2es6/', //放进需要反编译的es6写法的JS文件iconSource = sourceDir + 'combinePhoto/';
var distDir = 'webstart/dist/',imgDistDir = distDir + 'img/',jsDistDir = distDir + 'js/',cssDistDir = distDir + 'css/',serveRootDir = 'webstart/';// scss编译后的css将注入到浏览器里实现更新(scss compile and reload)
gulp.task('sass', function () {return gulp.src(scssSourceDir + '**/*.scss').pipe($.plumber({errorHandler: $.notify.onError('Error: <%= error.message %>')})).pipe($.sass({style: 'expanded'})).pipe($.autoprefixer({browsers: ['last 2 versions'],cascade: false})).pipe($.size({showFiles: true,pretty: true})).pipe(gulp.dest(cssSourceDir)).pipe($.gmc({compatibility: 'ie8'})).pipe($.rename({suffix: ".min"})).pipe($.size()).pipe(gulp.dest(cssDistDir)).pipe(reload({stream: true}));})// 静态服务器 + 监听 scss/html 文件(static server + listen scss file on change)
gulp.task('serve', ['sass'], function () {var files = [distDir + '**/*.html']bs.init(files, {server: serveRootDir}); //静态服务器启动的目录(server start directory)// 提供一个回调来捕获所有事件的CSS// files - 然后筛选的'change'和重载所有// css文件在页面上bs.watch([serveRootDir + "*.html"], function (event, file) {if (event === "change") {reload("*.html");}});bs.watch([cssDistDir + "*.css"], function (event, file) {if (event === "change") {reload("*.css");}});bs.watch([scssSourceDir + "*.scss"], function (event, file) {if (event === "change") {reload("*.scss");}});bs.watch([jsDistDir + "*.css"], function (event, file) {if (event === "change") {reload("*.js");}});
});//压缩css(minify css)
gulp.task('minifyCSS', function () {gulp.src(cssSourceDir + '*.css').pipe($.plumber({errorHandler: $.notify.onError('Error: <%= error.message %>')})).pipe($.autoprefixer({browsers: ['last 2 versions'],cascade: false,remove: true})).pipe($.csscomb()).pipe($.size({showFiles: true,pretty: true})).pipe($.concat('all/all.css')).pipe(gulp.dest(cssSourceDir)).pipe($.gmc({compatibility: 'ie8'})).pipe($.plumber({errorHandler: $.notify.onError('Error: <%= error.message %>')})).pipe($.rename({suffix: ".min"})).pipe($.size({showFiles: true,pretty: true})).pipe(gulp.dest(cssDistDir))
})//压缩HTML(minify html)
gulp.task('minifyHTML', function () {return gulp.src(distDir + 'index.html').pipe($.size({showFiles: true,pretty: true})).pipe($.gmh({conditionals: true,spare: true})).pipe($.rename({suffix: ".min"})).pipe($.size({showFiles: true,pretty: true})).pipe(gulp.dest(distDir))})//压缩图片(minify photo)
gulp.task('minifyImg', function () {return gulp.src(imgSourceDir + '*').pipe($.plumber({errorHandler: $.notify.onError('Error: <%= error.message %>')})).pipe($.imagemin({progressive: true,svgoPlugins: [{removeViewBox: false}],use: [pngquant()]})).pipe($.size({showFiles: true,pretty: true})).pipe(gulp.dest(imgDistDir));
})// 合并，压缩文件(concat file and minify),启用检测JS自行增加['eslint']
gulp.task('minifyJS', function () {return gulp.src(jsSourceDir + '**/*.js').pipe($.concat('all/all.js')).pipe($.size({showFiles: true,pretty: true})).pipe(gulp.dest(jsSourceDir)).pipe($.uglify())// .pipe($.eslint())// .pipe($.eslint.format()).pipe($.rename('all.min.js')).pipe($.size({showFiles: true,pretty: true})).pipe(gulp.dest(jsDistDir))
})//生成雪碧图 -- 可选任务
gulp.task('sprites', function () {return sprity.src({name: 'icons',                       //定义一个名称src: iconSource + '*.{png,jpg}',processor: 'css', // css生成处理//processor:'sass',  //SCSS生成处理style: cssDistDir + 'sprites.scss',  //CSS输出路径//style: '_icon.scss',                //这是生成的样式文件format: 'png',                      //png格式的图片orientation: 'vertical'         //雪碧图合并的方向，也可以设置成垂直或水平(vertical|horizontal|binary-tree)//cssPath: '#{$icon-sprite-path}',    //雪碧图的路径变量//template: './sprite-tpl.mustache',  //scss生成的模板}).pipe($.if('*.png', gulp.dest(imgDistDir), gulp.dest(cssDistDir)))//.pipe($.if('*.png', gulp.dest(imgDistDir), gulp.dest(scssSourceDir)))
});//eslint
// gulp.task('eslint', function() {//  return gulp.src([''])
//      .pipe($.eslint())
//      .pipe($.eslint.format())
// });//CSS反编译成SASS文件 -- 可选任务
gulp.task('css2scss', function () {return gulp.src(coverScssSourceDir + '*.css').pipe($.c2s()).pipe(gulp.dest(scssSourceDir));
});//ESL6写法的JS文件转化为ES5写法JS文件
gulp.task('es2js', function () {return gulp.src(coverEs6SourceDir + '*/**.js').pipe($.plumber({errorHandler: $.notify.onError('Error: <%= error.message %>')})).pipe($.babel()).pipe(gulp.dest(jsSourceDir));
});// 默认任务(default task)
gulp.task('default', ['serve'], function () {gulp.start('sass', 'minifyJS', 'minifyCSS', 'minifyHTML','minifyImg')gulp.watch(scssSourceDir + "*.scss", ['sass']);})

Gulp折腾记 - （2）常用任务构建的demo相关推荐

Gulp折腾记 - （3）常用任务构建的demo[改进版]
项目地址: https://github.com/crperlin/StartFrontendProject 任务队列编译SCSS -> CSS AMD文件优化压缩JS/HTML/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折腾记 - （2）常用任务构建的demo

项目地址：

构建任务范围

Gulpfile.js

Gulp折腾记 - （2）常用任务构建的demo相关推荐

最新文章

热门文章