我的gulp.js清单
var gulp = require('gulp'),
cssmin = require('gulp-clean-css'), //压缩css文件
concat = require('gulp-concat'), //合并js文件
jsmin = require('gulp-uglify'), //压缩js文件
imgmin = require('gulp-imagemin'), //图片压缩
rename = require('gulp-rename'), //文件重命名
jshint = require('gulp-jshint'), //js文件检查
rev = require('gulp-rev'), //- 对文件名加MD5后缀
revCollector = require('gulp-rev-collector'), //路径替换
connect = require('gulp-connect'); //配置本地服务器 //#########文件监听及自动刷新网页start#################
gulp.task('connect', function () {
connect.server({
host: 'localhost', //地址,可不写,不写的话,默认localhost
port: 3000, //端口号,可不写,默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
}); gulp.task('html', function () {
gulp.src('./bill/*.html')
.pipe(connect.reload());
}); gulp.task('watch', function () {
gulp.watch('./bill/css/*.css', ['html']); //监控css文件
gulp.watch('./bill/js/*.js', ['html']); //监控js文件
gulp.watch(['./bill/*.html'], ['html']); //监控html文件
}); gulp.task('server', ['connect', 'watch']); //#########文件监听及自动刷新网页end ################# gulp.task('Cssmin', function () {
gulp.src("bill/css/common.css")
.pipe(rename({suffix: '.min'}))
.pipe(cssmin({dubug: true}, function (details) {
console.log(details);
console.log(details.name + '(originalSize): ' + details.stats.originalSize);
console.log(details.name + '(minifiedSize): ' + details.stats.minifiedSize);
}))
.pipe(rev())
.pipe(gulp.dest("bill/css"))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('bill/css'));
}); gulp.task('Jsmin', function () {
gulp.src("bill/js/common.js")
.pipe(rename({suffix: '.min'}))
.pipe(jsmin())
.pipe(rev())
.pipe(gulp.dest("bill/js"))
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('bill/js'));
}); gulp.task('Imgmin', function () {
gulp.src("src/img/*.jpg")
.pipe(imgmin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest("dist/img"));
}); gulp.task('rev', function () {
gulp.src(['./bill/**/*.json', "./bill/index.html"])//- 读取 rev-manifest.json 文件以及需要进行替换的文件
.pipe(revCollector(
{
replaceReved: true,
dirReplacements: {
'css': 'css',
'js': 'js'
}
}
))//- 执行文件名的替
.pipe(gulp.dest('./bill')); //- 替换后的文件输出的目录
}); //执行配置任务
gulp.task('default', ['Cssmin', 'Jsmin', "rev"], function () {
// gulp.start('testJsmin');
});
我的gulp.js清单的更多相关文章
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- Gulp.js简介
Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- gulp.js 的安装以及使用
首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以. 但还是推荐,点击download选中一款适合电脑配置的版本. Node安装过程,就是下一步 and 下一步~~ 测试手否安装成功 ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- [翻译]Gulp.js简介
我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新 ...
- exactly the kind of division of tasks that Gulp.js is built on
The results are then passed to a reporter function that displays the results of the code analysis in ...
- gulp.js实现less批量实时编译
问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...
- Browsersync + Gulp.js
1.安装 Browsersync 和 依赖包 Gulp npm install browser-sync gulp --save-dev 2.gulpfile.js var gulp = requir ...
随机推荐
- 记录xerces使用(VS2017 C++)
1.编译xerces,获得dll文件和lib文件 2.将dll文件和lib文件拷贝到使用xerces的工程目录里面去 3.配置VS2017 C/C++ -> All Options --&g ...
- js event loop事件循环
浏览器环境 以下两段代码是等价的.req对事件的回调设置,实际上就是当前主线程任务队列的任务. var req = new XMLHttpRequest(); req.open('GET', url) ...
- Django之web本质
Django之web本质 Web的本质,是基于socket玩的. 在我们上网的过程中,一个访问请求是如何工作的. Web的框架: 网络的连接都是基于Socket 在连接中有TCP/UDP 和HTTP协 ...
- iptables之FORWARD转发链
注意:本机路由转发的时候,才配置FORWARD转发链! #iptables –A FORWARD –s 192.168.0.0/24 –j ACCEPT #iptables –A FORWARD –d ...
- python mock模块使用(一)
什么是mock unittest.mock是一个用于在Python中进行单元测试的库,Mock翻译过来就是模拟的意思,顾名思义这个库的主要功能是模拟一些东西. 它的主要功能是使用mock对象替代掉指定 ...
- CDOJ 1217 The Battle of Chibi
The Battle of Chibi Time Limit: 6000/4000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Othe ...
- [Go]字典(map)的操作和约束
字典(map)存储的是键值对(key-value pair,一个键值对代表了一对键和值.一个键和一个值分别代表了一个从属于某一类型的独立值,把它们两个捆绑在一起就是键值对,也称“键-元素对”)的集合 ...
- BZOJ 3175: [Tjoi2013]攻击装置
捉水题真是捉上瘾了TUT Description 给定一个01矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置(x,y)都可以按照“日”字攻击其周围的 8个位置(x-1,y-2),(x-2,y- ...
- 【bzoj1090】 [SCOI2003]字符串折叠
[bzoj1090] [SCOI2003]字符串折叠 2014年3月9日3,1140 Description 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S S 2. X(S)是X ...
- tomcat并发数
Tomcat的最大并发数是可以配置的,实际运用中,最大并发数与硬件性能和CPU数量都有很大关系的.更好的硬件,更多的处理器都会使Tomcat支持更多的并发. Tomcat默认的HTTP实现是采用阻塞式 ...