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清单的更多相关文章

  1. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  2. Gulp.js简介

    Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...

  3. “流式”前端构建工具——gulp.js 简介

    Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...

  4. gulp.js 的安装以及使用

    首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以. 但还是推荐,点击download选中一款适合电脑配置的版本. Node安装过程,就是下一步 and 下一步~~ 测试手否安装成功 ...

  5. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  6. [翻译]Gulp.js简介

    我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新 ...

  7. 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 ...

  8. gulp.js实现less批量实时编译

    问题描述: 在之前一直用Koala编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译:因为目前项目也没有用到webpack,我的less是通过vs code ...

  9. Browsersync + Gulp.js

    1.安装 Browsersync 和 依赖包 Gulp npm install browser-sync gulp --save-dev 2.gulpfile.js var gulp = requir ...

随机推荐

  1. (14) openssl x509(签署和自签署)

    主要用于输出证书信息,也能够签署证书请求文件.自签署.转换证书格式等. openssl x509工具不会使用openssl配置文件中的设定,而是完全需要自行设定或者使用该伪命令的默认值,它就像是一个完 ...

  2. [Noip2017][Day 1][T1]玩具谜题(toy.cpp)

    题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...

  3. cxLookupCombobox的多字段模糊匹配

    查了网上很多资料,懒人输入:通过程序使用过滤对话达到自己的目的: 用到cxFilter单元: cbb_DoctorOrder.Properties.View.DataController.Filter ...

  4. luogu3959 宝藏

    状压搜索轻轻松松就过了--考场上代码太丑了T了几个点 #include <iostream> #include <cstring> #include <cstdio> ...

  5. 一张图表,人人都能建立自己的AARRR运营模型

    每次跟同行聊运营,聊用户,聊产品,最后都会回到AARRR模型上来,这个用户全生命周期模型概括了互联网产品运营的5个关键环节. 获客是运营的基础,促进用户活跃才能让产品有生命力,提升留存减少流失让用户规 ...

  6. 大数据学习——mapreduce运营商日志增强

    需求 1.对原始json数据进行解析,变成普通文本数据 2.求出每个人评分最高的3部电影 3.求出被评分次数最多的3部电影 数据 https://pan.baidu.com/s/1gPsQXVYSQE ...

  7. Python和Mongodb

    定义好链接DB类 # -*- coding: UTF-8 -*- from pymongo import MongoClient # 数据库连接 class MongoDB(object): def ...

  8. Relocation(状压DP)

    Description Emma and Eric are moving to their new house they bought after returning from their honey ...

  9. Poj3253:Fence Repair 【贪心 堆】

    题目大意:背景大概是个资本家剥削工人剩余价值的故事....有一块木板,要把它切成几个长度,切一次的费用是这整块被切木板的长度,例如将一个长度为21的木板切成2和19两块费用为21,切成两块的长度及顺序 ...

  10. UML的关联(Association), 聚合(Aggregation), 组合(Composition)区别

    转载:http://blog.csdn.net/ocean181/article/details/6117369 UML的关联(Association), 聚合(Aggregation), 组合(Co ...