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

  1. 前端工具之-- Sublime

    开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS ...

  2. 覆盖率测试工具gcov的前端工具_LCOV

    http://my.oschina.net/alphajay/blog/33725 1.Gcov是进行代码运行的覆盖率统计的工具,它随着gcc的发布一起发布的,它的使用也很简单,需要在编译和链接的时候 ...

  3. 前端工具之WebPack解密--使用

    接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...

  4. 前端工具之WebPack解密之背景

    请注意,这是一篇站在完全新手的角度上来写的文章.可能你是一个后端人员想了解前端工具的使用和概念;也可能你是一个前端小菜(还在DIV+CSS的世界里挣扎着).本文比较适合那些以前完全没有接触过WebPa ...

  5. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  6. VS2015前端工具:NPM和Web Essentials

    VS2015前端工具:NPM和Web Essentials 1.写作背景 想在5月份前换个工作环境了,“检讨”一下自己混饭的技术水平和处世的人脉关系,觉得很不给力!为人方面,人各有志也就不纠结了,但本 ...

  7. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  8. 【tool】部署前端工具

    一.部署前端工具如下: nodejsnpmwebpackvue 二.安装nodejs 1. 下载稳当版本nodejs 2. 配置环境变量 NODE_HOME=D:\soft\nodejs\ path= ...

  9. 我的前端工具集(六)Ajax封装token

    我的前端工具集(六)Ajax封装token   liuyuhang原创,未经允许禁止转载 在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都 ...

随机推荐

  1. [JZOJ4687]奇袭

    [JZOJ4687]奇袭 题目 由于各种原因,桐人现在被困在Under World(以下简称UW)中,而UW马上要迎来最终的压力测试——魔界入侵. 唯一一个神一般存在的Administrator被消灭 ...

  2. 暑假集训D17总结

    考试 玄学的一次考试= = T1乱搞 只会乱搞出前二十分  然后真的拿了二十分 T2模拟 自己造数据 没有一个是在十分钟内跳出来的 然后竟然A了 T3暴力 觉得如果老爷机心情不好就会被卡到20  然后 ...

  3. sgu 176 有源汇有上下界的最小流模板题

    /*参考博文:http://hi.baidu.com/dragon_eric123/item/82e259200ece744046996282 有上下界的有源最小流 */ #include<st ...

  4. 络谷 P2865 [USACO06NOV]路障Roadblocks

    P2865 [USACO06NOV]路障Roadblocks 题目描述 Bessie has moved to a small farm and sometimes enjoys returning ...

  5. LINUX 内核 图 外国牛人

    http://duartes.org/gustavo/blog/ http://blog.csdn.net/drshenlei

  6. 使用Visual Studio Code调试Electron主进程

    1.打开VS Code,使用文件->打开,打开程序目录 2.切换到调试选项卡 3.打开launch.json配置文件 4.在“附加到进程”节点上增加localhost配置 5.使用命令行启动el ...

  7. 邪恶的C++

    曾经看到一篇很有趣的文章,今天转载一下.抱歉的是没有找到最原始的版本,算是遗憾吧. ---------- 华丽的分割线 ---------- Linus曾经(2007年9月)在新闻组gmane.com ...

  8. luogu2154 [SDOI2009] 虔诚的墓主人 离散化 树状数组 扫描线

    题目大意 公墓可以看成一块N×M的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地.一块墓地的虔诚度是指以这块墓地为中心的十字架的数目,一个十字架可以看成中间是墓地,墓地的正上.正 ...

  9. 【POJ 2449】 Remmarguts' Date

    [题目链接] http://poj.org/problem?id=2449 [算法] A*(启发式搜索) 首先,求第k短路可以用优先队列BFS实现,当T第k次入队时,就求得了第k短路,但是,这种做法的 ...

  10. 第14章 Wi-Fi系统应用 14.1 了解Wi-Fi系统的结构

    Android平台中Wi-Fi系统从上到下主要包括Java框架类.Android适配器库.wpa_supplicant守护进程.驱动程序和协议,这几部分的系统结构如图14-3所示. (1)Wi-Fi用 ...