最近一直在构建Angular应用,通过bower管理前端包依赖,然后通过gulp和它配合.发现gulp相比于grunt真的很轻,现在我的项目中已经取代了grunt.这里把我的一些实践贴记录下来和大家分享一下.

gulp定位和grunt一样也是前端构建工具,和grunt相比它更突出一个流的概念,它所有的任务执行都是one by one的感觉,官网的自定义就是:

gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

首先我感觉它重量级较grunt轻了很多,上手相对简单,同时处理上也能满足我们的需求.这里通过一个真实项目的配置文件说明一下该怎么用gulp.

npm install -g gulp

局部安装在你的项目

npm install --save-dev gulp

两种安装方式随意,没什么好说的.

(2) 运行

在目录下创建一个"gulpfile.js"文件,通过gulp命令运行即可.

(3) gulpfile.js文件

这是一个完整的例子,已经运用在我项目中,已经加了注释,看完整个文件你对于gulp应该就已经了解并可以使用了.

var gulp = require('gulp');

// 引入组件
var less = require('gulp-less'), // less
minifycss = require('gulp-minify-css'), // CSS压缩
uglify = require('gulp-uglify'), // js压缩
concat = require('gulp-concat'), // 合并文件
rename = require('gulp-rename'), // 重命名
clean = require('gulp-clean'); //清空文件夹 // less解析
gulp.task('build-less', function(){
gulp.src('./javis/static/less/lib/s-production.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/lib/s-skins.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/lib/s/s.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/lib/')) gulp.src('./javis/static/less/*.less')
.pipe(less())
.pipe(gulp.dest('./javis/static/build/css/'))
}); // 合并、压缩、重命名css
gulp.task('stylesheets',['build-less'], function() {
// 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件.
gulp.src(['./javis/static/build/css/*.css','!./javis/static/build/css/areaMap.css'])
.pipe(concat('all.css'))
.pipe(gulp.dest('./javis/static/build/css/'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('./javis/static/build/css'));
}); // 合并,压缩js文件
gulp.task('javascripts', function() {
gulp.src('./javis/static/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./javis/static/build/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('./javis/static/build/js'));
}); // 清空图片、样式、js
gulp.task('clean', function() {
return gulp.src(['./javis/static/build/css/all.css','./javis/static/build/css/all.min.css'], {read: false})
.pipe(clean({force: true}));
}); // 将bower的库文件对应到指定位置
gulp.task('buildlib',function(){ gulp.src('./bower_components/angular/angular.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular/angular.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/jquery/dist/jquery.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-route/angular-route.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-animate/angular-animate.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-bootstrap/ui-bootstrap.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) gulp.src('./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')
.pipe(gulp.dest('./javis/static/build/js/')) //--------------------------css------------------------------------- gulp.src('./javis/static/less/fonts/*')
.pipe(gulp.dest('./javis/static/build/css/fonts/')) gulp.src('./bower_components/bootstrap/fonts/*')
.pipe(gulp.dest('./javis/static/build/css/fonts/')) gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('./javis/static/build/css/lib')) }); // 定义develop任务在日常开发中使用
gulp.task('develop',function(){
gulp.run('buildlib','build-less','javascripts','stylesheets'); gulp.watch('./javis/static/less/*.less', ['build-less']);
}); // 定义一个prod任务作为发布或者运行时使用
gulp.task('prod',function(){
gulp.run('buildlib','build-less','stylesheets','javascripts'); // 监听.less文件,一旦有变化,立刻调用build-less任务执行
gulp.watch('./javis/static/less/*.less', ['build-less']);
}); // gulp命令默认启动的就是default认为,这里将clean任务作为依赖,也就是先执行一次clean任务,流程再继续.
gulp.task('default',['clean'], function() {
gulp.run('develop');
});

个人感觉如果使用过grunt那么看这个完全没难度,即使什么都没用过也大概能知道是什么意思.

上面通过gulp实现了less解析,js和css文件的合并,压缩,重命名,以及文件监听,清理等.注意一下上面require进来的插件需要你自己手动npm安装一下,具体的插件都有哪些以及对应安装可以看一下官网的plugin板块,很简单也很详细.这里仅列出一些常用的.

gulp-ruby-sass: 支持sass 
gulp-minify-css: 压缩css 
gulp-jshint: 检查js 
gulp-uglify: 压缩js 
gulp-concat: 合并文件 
gulp-rename: 重命名文件 
gulp-htmlmin: 压缩html 
gulp-clean: 清空文件夹

最后附上官网: http://gulpjs.com/

gulp完全开发指南 => 快来换掉你的Grunt吧的更多相关文章

  1. Jetty使用教程(四:21-22)—Jetty开发指南

    二十一.嵌入式开发 21.1 Jetty嵌入式开发HelloWorld 本章节将提供一些教程,通过Jetty API快速开发嵌入式代码 21.1.1 下载Jetty的jar包 Jetty目前已经把所有 ...

  2. JVM 平台上的各种语言的开发指南

    JVM 平台上的各种语言的开发指南 为什么我们需要如此多的JVM语言? 在2013年你可以有50中JVM语言的选择来用于你的下一个项目.尽管你可以说出一大打的名字,你会准备为你的下一个项目选择一种新的 ...

  3. 关于《Swift开发指南》背后的那些事

    时间轴(倒叙)2014年8月底在图灵出版社的大力支持下,全球第一本全面.系统.科学的,包含本人多年经验的呕心沥血之作<Swift开发指南>(配有同步视频课程和同步练习)全线重磅推出2014 ...

  4. Boost程序库完全开发指南——深入C++“准”标准库(第3版)

    内容简介  · · · · · · Boost 是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++程序库,有着“C++‘准’标准库”的美誉. Boost 由C++标准委员会部分成员所设立的Bo ...

  5. [翻译]现代java开发指南 第二部分

    现代java开发指南 第二部分 第二部分:部署.监控 & 管理,性能分析和基准测试 第一部分,第二部分 =================== 欢迎来到现代 Java 开发指南第二部分.在第一 ...

  6. [翻译]现代java开发指南 第一部分

    现代java开发指南 第一部分 第一部分:Java已不是你父亲那一代的样子 第一部分,第二部分 =================== 与历史上任何其他的语言相比,这里要排除c语言和cobol语言,现 ...

  7. jstorm开发指南-写个简单的jstorm应用

    jstorm开发指南-写个简单的jstorm应用 发表于 2015-07-18   |   分类于 大数据   |   暂无评论 jstorm 是阿里巴巴开源的基于storm采用Java重写的一套分布 ...

  8. 转:Oculus Unity Development Guide开发指南(2015-7-21更新)

    http://forum.exceedu.com/forum/forum.php?mod=viewthread&tid=34175 Oculus Unity Development Guide ...

  9. 基于第三方开源库的OPC服务器开发指南(2)——LightOPC的编译及部署

    前文已经说过,OPC基于微软的DCOM技术,所以开发OPC服务器我们要做的事情就是开发一个基于DCOM的EXE文件.一个代理/存根文件,然后就是写一个OPC客户端测试一下我们的服务器了.对于第一项工作 ...

随机推荐

  1. myeclipse相关

    :) MyEclipse 10.7以后开始支持JDK1.7,修改settings下面的配置文件没卵用.

  2. jq 确定删除方法与文件删除

    var choice=confirm("您确认要删除吗?", function() { }, null);                if(choice)           ...

  3. 使用Timer和ScheduledThreadPoolExecutor执行定时任务

    Java使用Timer和ScheduledThreadPoolExecutor执行定时任务 定时任务是在指定时间执行程序,或周期性执行计划任务.Java中实现定时任务的方法有很多,主要JDK自带的一些 ...

  4. JVM的内存分配与垃圾回收策略

    自动内存管理机制主要解决了两个问题:给对象分配内存以及回收分配给对象的内存. >>垃圾回收的区域 前面的笔记中整理过虚拟机运行数据区,再看一下这个区域: 注意在这个Runtime Data ...

  5. 菜鸟学Linux命令:端口查看和操作命令

    >>端口和进程 端口不是独立存在的,它是依附于进程的.某个进程开启,那么它对应的端口就开启了,进程关闭,则该端口也就关闭了.下次若某个进程再次开启,则相应的端口也再次开启. >> ...

  6. 常用的数据统计Sql 总结(转)

    转:http://www.cnblogs.com/zhangweizhong/p/5577842.html 最近刚在搞一个BI的项目,里面需要大量的sql 数据统计相关运用,加深了我又对SQL的理解与 ...

  7. SVN 升级后出现You need to upgrade the working copy first.

    今天将svn更新后,出现 svn: The working copy at 'E:\591woospace\kst_fashion_alipay_v1.2.0\src\com\kstapp\wansh ...

  8. 第一部分:使用iReport制作报表的详细过程(Windows环境下)

    提示:在有些板块,文中的图片看不到,建议到我的blog浏览文章:http://blog.csdn.net/jemlee2002/文章将会涉及3个方面的内容: 第一部分:使用iReport制作报表的详细 ...

  9. git clean 使用方法

    删除 一些 没有 git add 的 文件: git clean 参数 -n 显示 将要 删除的 文件 和  目录 -f 删除 文件,-df 删除 文件 和 目录 git clean -n git c ...

  10. Oracle 11g新特性 -- 延迟段

    11gR2之前的版本中,当创建一张表时,会自动分配段空间,这样做有几个弊端: 1. 初始创建表时就需要分配空间,自然会占用一些时间,如果初始化多张表,这种影响就被放大. 2. 如果很多表开始的一段时间 ...