我的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 ...
随机推荐
- Fortran中常用函数列表
Y=INT(X) 转换为整数 ALL(所有型态) INTEGER Y=REAL(X) 转换为实数 INTEGER REAL Y=DREAL(X) 取复数实部(倍精度) COMPLEX*16 REAL* ...
- 秋招复习-C++(二)
1.Segmentation Fault是什么?什么情况下会导致它的出现?怎么解决? Segmentation Fault中文是段错误,在Linux系统中,段错误一般是是由用户程序非法访问内存引起的( ...
- POJ-1190 蛋糕问题
这道题目我们使用深搜加剪枝的方法来写,我们首先算出一个最小表面积和最小体积来,就是半径从一递增,高度也从一递增,这是题目要求. 然后我们计算出一个底层最大的半径和最大的高度,我们就从这个最大半径和最大 ...
- Android布局之线性布局——LinearLayout
本文将详细介绍线性布局的各种xml属性. xml属性 <?xml version="1.0" encoding="utf-8"?> <Line ...
- 1. node.js环境搭建 第一行代码
一.NodeJs简介 NodeJS官网上的介绍: Node.js is a platform built on Chrome's JavaScript runtime for easily bui ...
- linux中.bashrc 等文件中的rc是什么意思
英文原义:RC (run command)中文释义:含有程序(应用程序甚至操作系统)启动指令的脚本文件 注 解:这一文件在操作系统启动时会自动执行,它含有要运行的指令(命令或其它脚本)列表. 相当于w ...
- POJ1201:Intervals【差分约束】
题目大意:给出N个闭区间,每个区间给出一个ci值,让你找出最小的数集Z使得每个闭区间都有不少于ci个Z中的元素,求card(Z) 思路:06年集训队论文<浅析差分约束系统>有详细的解题,设 ...
- 1027 stl
#include<stdio.h> #include<queue> using namespace std; int main() { int i,n,m,j,k,a[100 ...
- bzoj3875 【Ahoi2014】骑士游戏 spfa处理后效性动规
骑士游戏 [故事背景] 长期的宅男生活中,JYY又挖掘出了一款RPG游戏.在这个游戏中JYY会 扮演一个英勇的骑士,用他手中的长剑去杀死入侵村庄的怪兽. [问题描述] 在这个游戏中,JYY一共有两种攻 ...
- 【NOIP模拟&POJ2152】灰色的果实(树形DP)
题意: Nebula 历 2014 年 12 月 17 日,欢迎来到异世界. 面对截然不同的新世界,你决定采取最普通但最为有效的方式来探索,那便 是徒步.准备好营地的一切,你开始了探索的旅程. 步行大 ...