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. How do I drop a MongoDB database, from the command line?

    mongo <dbname> --eval "db.dropDatabase()" > use mydb; > db.dropDatabase(); mon ...

  2. Expanding Rods POJ 1905 二分

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 17050   Accepted: 4503 Description When ...

  3. ustc 1117

    无根树同构 有两种方法,一种是确定其中一棵树,另一棵树枚举根节点. 一种是,利用拓扑排序,先确定其中一棵树.另一棵树,若拓扑后剩两个节点,则枚举这两个节点为根结点,否则,只需做一次.注意,无根树节点入 ...

  4. 小议:部署SharePoint 2013时,无法连接SQL Server问题

    最近在给学员培训时发现,个别学员在完毕SharePoint 2013部署时,无法连接SQL Server,两种报错情况,例如以下所看到的: :配置SharePointConnect to SQL Se ...

  5. Mybatis+0+null,小问题引发的血案

    Mybatis在进行<if test="status != null and status != ''">判空操作时,假设status为0的时候,该推断条件的值为fal ...

  6. edittext禁止android软键盘弹出

    1. EditText ed=(EditText) findViewById(R.id.test); ed.clearFocus(); 2. 在AndroidMainfest.xml中选择哪个acti ...

  7. 603E

    LCT维护MST+子树信息 看了好长时间题解 editorial 结论:像做最小生成树一样,当每个连通块都是偶数个点就停下来. 每次复杂度mlogm 口胡 首先我们发现奇数个点是不满足每个点度数为奇数 ...

  8. PCB 无需解压,直接读取Zip压缩包指定文件 实现方法

    最近有一项需求,将电测试点数后台批量写入到工程系统流程指示中,而电测试文件存在压缩包中,压缩包存在公共网络盘 示例图: 一.采用原始方法(4步完成): 第1步:.网络盘ZIP拷到本地, 第2步:解压Z ...

  9. mysql如何查询最新插入的数据

    在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作为其他表的外键,形成“主从表结构”,这是数据库设计中常见的用法.但是在具体生成id的时候,我们的操作顺序一般是:先在 ...

  10. bzoj1143(2718)[CTSC2008]祭祀river(最长反链)

    1143: [CTSC2008]祭祀river Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2781  Solved: 1420[Submit][S ...