我的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 ...
随机推荐
- STL 源码分析六大组件-allocator
1. allocator 基本介绍 分配器(allocator))是C ++标准库的一个组件, 主要用来处理所有给定容器(vector,list,map等)内存的分配和释放.C ++标准库提供了默认使 ...
- HDU-5253-链接的管道
http://acm.hdu.edu.cn/showproblem.php?pid=5253 #include <iostream> #include <bits/stdc++.h& ...
- 深入理解Spring IoC容器和动态代理机制
Deployment期间验证 实现一: <bean id="theTargetBean" class="..."/> <bean id=&qu ...
- python基础(一)—— 核心数据类型
Hello World程序 [root@mysql ~]# python3 Python 3.6.5 (default, Jul 8 2018, 11:41:23) [GCC 4.4.7 20120 ...
- Ubuntu配置NFS服务器
NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客户端应用可 ...
- tornado框架基础09-cookie和session
01 cookie 在上节,我们简单了解了登录过程,但是很明显,每次都需要登录,但是在平常逛网站的只需要登录一次,那么网站是如何记录登录信息的呢? 有没有什么办法可以让浏览器记住登录信息,下次再次打开 ...
- 【02】SASS与SCSS
SASS语法 SASS语法也称之为SASS的缩进语法,其目的是担供一个更简洁的语法.对于一些人来说,更多的是基于于CSS的美学吸引力,用SASS来代替SCSS语法. SASS语法和CSS语法不一样,他 ...
- Action中result的各种转发类型
Action中result的各种转发类型 1,dispatcher:默认值 ,内部定向 <result>/WEB-INF/page/employeeAdd.jsp</result&g ...
- F5 TCP Traffic Flow v0.5
300dpi高清版下载地址 http://down.51cto.com/data/2332253
- hdu 1711kmp裸题
#include<stdio.h> #define N 1000050 int text[N],t[N],next[N],n,m; void getnext() { int j=0,k=- ...