gulpfile.js demo
var config = require("./build.config") //获取build.config.js文件里的内容
var gulp = require("gulp") //获取gulp模块
var sass = require('gulp-sass'); //gulp-sass模块是用于把sass转成css
var path = require("path")
var babel = require("gulp-babel"); //gulp-babel模块用于把es6转成es5
var postcss = require("gulp-postcss") //项目中把scss文件转化成css文件
var autoprefixer = require('autoprefixer') //autoprefixer根据当前浏览器的普及度以及属性支持提供给你前缀:
var postasset = require("postcss-assets") //postcss-assets 插件用来处理图片和 SVG。在 CSS 声明中引用图片时,可以使用 resolve 加上图片路径的形式,如“resolve(‘logo.png’)”。https://www.ibm.com/developerworks/cn/web/1604-postcss-css/
var cssnano = require('cssnano') //css文件压缩
var imagemin = require('gulp-imagemin'); //压缩图片文件
var pngquant = require('imagemin-pngquant'); //使用pngquant深度压缩png图片的imagemin插件
var uglify = require('gulp-uglify'); //压缩javascript文件
var cache = require('gulp-cache'); //静态资源缓存
var sourcemaps = require('gulp-sourcemaps'); //简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置
var browserify = require('gulp-browserify');
var changed = require('gulp-changed'); //该插件能够实现只编译或打包改变过文件,大大加快了gulp task的执行速度。
var runSequence = require('run-sequence'); //让gulp任务,可以相互独立,解除任务间的依赖,增强task复用
livereload = require('gulp-livereload'); //不用F5了,实时自动刷新页面来开发
var rev = require('gulp-rev') //对文件加md5后缀
var revCollector = require('gulp-rev-collector'); //文件路径替换
var log = console.log.bind(console);
var prefix = require('gulp-prefix'); //给引用了静态资源的的HTML文件替换引用和加CDN前缀
require('shelljs/global') gulp.task('d', function () {
livereload.listen();
gulp.watch('src/**/*.*', function (file) { //关查src下的所有文件
log("File " + file.path + " changed!");
if (file.path.endsWith(".scss")) { //如果文件后缀是.scss
gulp.run("css")
} else if (file.path.endsWith(".jsx")) { //如果文件后缀是.jsx
gulp.run("js")
} else {
livereload.changed(file.path);
}
})
log(" ***** Watching " + "[crtl+c to stop.] ****** ");
}); gulp.task('r', function (callback) {
rm('-rf', config.distRoot)
runSequence(["js:r", "css:r"], "revCss", "revJs", callback)
});
css()
css(":r")
js()
js(":r")
gulp.task("default", ["r"]); function js(type) {
gulp.task("js" + (type || ""), function () {
var stream = gulp.src(config.jsSrc)
.pipe(changed(config.jsDist))
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015']
}))
.pipe(browserify({
debug: false
}))
if (type == ":r") {
stream = stream.pipe(uglify({compress: {warnings: true}}))
.pipe(sourcemaps.write("./sources_maps"))
.pipe(rev())
.pipe(gulp.dest(config.jsDist))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/js'))
} else {
stream.pipe(gulp.dest("./src/static/js"))
}
return stream;
});
}
function css(type) {
var processors = [
postasset,
autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.1'],
cascade: true,
remove: true
})
];
var depend = [];
if (type == ":r") { // 如果是打包线上版本
processors.push(cssnano()); 压缩css
depend[] = "img"
}
gulp.task('css' + (type || ""), depend, function () {
var stream = gulp.src(config.cssSrc)
.pipe(changed(config.cssDist))
.pipe(sass())
.pipe(postcss(processors))
//.pipe(rename(function (path) {
// path.extname = ".css"
//})) if (type == ":r") {
stream.pipe(rev())
.pipe(gulp.dest(config.cssDist))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'));
} else {
stream.pipe(gulp.dest("./src/static/css"))
}
});
} gulp.task('img', function () {
gulp.src(config.imgSrc)
.pipe(cache(imagemin({ //缓存压缩图片
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
})))
.pipe(gulp.dest(config.imgDist));
}); gulp.task('revCss', function () {
return gulp.src(['./rev/css/*.json', './src/*.html']) //读取rev下面的.json文件,来替换html里面对应的文件名字
.pipe(revCollector()) //替换html中对应的记录
.pipe(gulp.dest(config.distRoot));
}); gulp.task('revJs', function () {
return gulp.src(['./rev/js/*.json', config.distRoot+"*.html"])
.pipe(revCollector())
.pipe(gulp.dest(config.distRoot));
}); gulp.task('prefix', function(){
gulp.src(config.distRoot+"*.html")
.pipe(prefix(config.cdnUrl, null, '{{'))
.pipe(gulp.dest(config.distRoot));
}); gulp.task('img:clear', function (done) { //清除图片缓存
return cache.clearAll(done);
});
gulpfile.js demo的更多相关文章
- 通过Anuglar Material串串学客户端开发 - javascript编译和gulpfile.js
Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs.更为强大的是,这个应用是真正的产品网站:就是它的官网.我有理由相信,这个网站是从源代码直接发布的,从网 ...
- 基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装
KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Fu ...
- gulp的使用(二)之gulpfile.js文件的配置
Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...
- 代码高亮插件——wangHightLighter.js——demo演示
wangHighLighter.js demo 语言: 主题: 转换 说明: wangHightLighter.js是一个可以将代码高亮显示的javascript小插件,支持常用的20多语言. ...
- gulpfile.js不断更新中...
Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...
- gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...
- gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
- gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块
1.压缩tinypng图片 gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...
- 编写gulpfile.js文件:压缩合并css、js
使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...
随机推荐
- 关于soapui如何做安全测试
1.首先安装soapui5.1.2 第一步:运行SoapUI-Pro-x32-5.1.2_576024.exe文件,按照步骤安装成功: 第二步:拷贝Protection-4.6.jar到soapui安 ...
- centos7 RPM命令安装操作
RPM 安装操作 命令: rpm -i 需要安装的包文件名 举例如下: rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 exam ...
- BCZM : 1.8
问题: 所有的员工均在1楼进电梯的时候,选择所要到达的楼层.然后计算出停靠的楼层i,当到达楼层i的时候,电梯停止.所有人走出电梯,步行到所在的楼层中.求所有人爬的楼层数目和的最小值. 解法一 ...
- [JZOJ3400] 【GDOI2014模拟】旅行
题目 题目大意 给你一个图,让你选择权值和最小的边,使得\(1\)和\(n\),\(2\)和\(n-1\),--,\(K\)和\(n-K+1\)联通. \(K\leq 4\) 思考历程 一看到这题就觉 ...
- JS基础知识回顾
回顾 由于 JavaScript 高级还是针对 JavaScript 语言本身的一个进阶学习,所以在开始之前我们先对以前所学过的 JavaScript 相关知识点做一个快速复习总结. 重新介绍 Jav ...
- R语言 循环
R语言循环 可能有一种情况,当你需要执行一段代码几次. 通常,顺序执行语句. 首先执行函数中的第一个语句,然后执行第二个语句,依此类推. 编程语言提供允许更复杂的执行路径的各种控制结构. 循环语句允许 ...
- thinkphp switch标签
用法: <switch name="变量" > <case value="值1" break="0或1">输出内容1 ...
- springboot2.x jpa接入多数据源
环境:springboot 2.1.4 数据源引入方式 数据源一 @Configuration @EnableTransactionManagement @EnableJpaRepositories( ...
- 详解JDBC与Hibernate区别
详解JDBC与Hibernate区别 引用地址:http://www.cnblogs.com/JemBai/archive/2011/04/13/2014940.html 刚开始学习JAVA时,认为H ...
- 9.1 mongo_python.py
# 安装 pymongo pip install pymongo import pymongo try: # 1.链接mongod的服务 mongo_py = pymongo.MongoClient( ...