前端工具gulp2
var gulp = require('gulp');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var imagemin = require('gulp-imagemin');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename'); //生成的路径、文件夹
var dist = 'dist/';
//需要监控的文件定义为一个对象
var source = {
less: ['src/less/*.less'],
css:[dist+'origin/*.css'],
images: ['src/images/*.{png,jpg,gif,ico,jpeg}'],
html: ['src/*.html'] }; gulp.task('testCssmin',function() {
gulp.src(source.less) //多个文件以数组形式传入
.pipe(less())
.pipe(gulp.dest(dist+'css/origin'))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(dist+'css/'));
}); gulp.task('testImagemin', function () {
gulp.src(source.images)
.pipe(imagemin({
// optimizationLevel: 3, //类型:Number 默认:3 取值范围:0-7(优化等级)
// progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
// interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
// multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest(dist+'images'));
}); gulp.task('testHtmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src(source.html)
.pipe(htmlmin(options))
.pipe(gulp.dest(dist));
}); //package
gulp.task('package', ['testImagemin','testCssmin','testHtmlmin'],function () {
console.log('package finish ...')
}) //watch
gulp.task('watch', function() {
return gulp.watch([source.html,source.less,source.images], ['testImagemin','testCssmin','testHtmlmin']);
});
今天就贴一个我用的配置文件,gulpfile.js:
说明:
1.gulp的一个问题是合并task,上面的package任务就合并了以下的所任务。gulp同步执行任务这块,关于这方面更深的讨论参见:
1)http://blog.csdn.net/mrhaoxiaojun/article/details/51907132
2)gulp顺序执行任务
前端工具gulp2的更多相关文章
- 前端工具之-- Sublime
开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS ...
- 覆盖率测试工具gcov的前端工具_LCOV
http://my.oschina.net/alphajay/blog/33725 1.Gcov是进行代码运行的覆盖率统计的工具,它随着gcc的发布一起发布的,它的使用也很简单,需要在编译和链接的时候 ...
- 前端工具之WebPack解密--使用
接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...
- 前端工具之WebPack解密之背景
请注意,这是一篇站在完全新手的角度上来写的文章.可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着).本文比较适合那些以前完全没有接触过WebPa ...
- css3前端工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
- VS2015前端工具:NPM和Web Essentials
VS2015前端工具:NPM和Web Essentials 1.写作背景 想在5月份前换个工作环境了,“检讨”一下自己混饭的技术水平和处世的人脉关系,觉得很不给力!为人方面,人各有志也就不纠结了,但本 ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 【tool】部署前端工具
一.部署前端工具如下: nodejsnpmwebpackvue 二.安装nodejs 1. 下载稳当版本nodejs 2. 配置环境变量 NODE_HOME=D:\soft\nodejs\ path= ...
- 我的前端工具集(六)Ajax封装token
我的前端工具集(六)Ajax封装token liuyuhang原创,未经允许禁止转载 在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都 ...
随机推荐
- [JZOJ4687]奇袭
[JZOJ4687]奇袭 题目 由于各种原因,桐人现在被困在Under World(以下简称UW)中,而UW马上要迎来最终的压力测试——魔界入侵. 唯一一个神一般存在的Administrator被消灭 ...
- 暑假集训D17总结
考试 玄学的一次考试= = T1乱搞 只会乱搞出前二十分 然后真的拿了二十分 T2模拟 自己造数据 没有一个是在十分钟内跳出来的 然后竟然A了 T3暴力 觉得如果老爷机心情不好就会被卡到20 然后 ...
- sgu 176 有源汇有上下界的最小流模板题
/*参考博文:http://hi.baidu.com/dragon_eric123/item/82e259200ece744046996282 有上下界的有源最小流 */ #include<st ...
- 络谷 P2865 [USACO06NOV]路障Roadblocks
P2865 [USACO06NOV]路障Roadblocks 题目描述 Bessie has moved to a small farm and sometimes enjoys returning ...
- LINUX 内核 图 外国牛人
http://duartes.org/gustavo/blog/ http://blog.csdn.net/drshenlei
- 使用Visual Studio Code调试Electron主进程
1.打开VS Code,使用文件->打开,打开程序目录 2.切换到调试选项卡 3.打开launch.json配置文件 4.在“附加到进程”节点上增加localhost配置 5.使用命令行启动el ...
- 邪恶的C++
曾经看到一篇很有趣的文章,今天转载一下.抱歉的是没有找到最原始的版本,算是遗憾吧. ---------- 华丽的分割线 ---------- Linus曾经(2007年9月)在新闻组gmane.com ...
- luogu2154 [SDOI2009] 虔诚的墓主人 离散化 树状数组 扫描线
题目大意 公墓可以看成一块N×M的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地.一块墓地的虔诚度是指以这块墓地为中心的十字架的数目,一个十字架可以看成中间是墓地,墓地的正上.正 ...
- 【POJ 2449】 Remmarguts' Date
[题目链接] http://poj.org/problem?id=2449 [算法] A*(启发式搜索) 首先,求第k短路可以用优先队列BFS实现,当T第k次入队时,就求得了第k短路,但是,这种做法的 ...
- 第14章 Wi-Fi系统应用 14.1 了解Wi-Fi系统的结构
Android平台中Wi-Fi系统从上到下主要包括Java框架类.Android适配器库.wpa_supplicant守护进程.驱动程序和协议,这几部分的系统结构如图14-3所示. (1)Wi-Fi用 ...