文档章节

gulp完全开发指南 => 快来换掉你的Grunt吧

顽Shi
 顽Shi
发布于 2014/06/03 22:51
字数 1154
阅读 1248
收藏 30
点赞 3
评论 3

    最近一直在构建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.

  (1) 安装(需要npm)

    全局安装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/

    如果发现任何问题,欢迎留言给我.

© 著作权归作者所有

共有 人打赏支持
顽Shi
粉丝 272
博文 81
码字总数 92387
作品 0
普陀
程序员
加载中

评论(3)

t
tza17313
// 将bower的库文件对应到指定位置
这段应该用 wiredep 来自动获取
顽Shi
顽Shi

引用来自“鱼说还休”的评论

确实很好,不过可以目录可以迭代操作,如这篇帖子 http://www.4byte.cn/question/19914.html , 不必要每次都手写文件操作
这个是稍微早时候写的了,现在用了一些更好的技巧,过一阵会修改一下,加一点内容.
鱼说还休
鱼说还休
确实很好,不过可以目录可以迭代操作,如这篇帖子 http://www.4byte.cn/question/19914.html , 不必要每次都手写文件操作
【转】有关 Grunt - 自动化构建工具的奇技淫巧

原文:https://segmentfault.com/a/1190000005029360?utmsource=tuicool&utmmedium=referral 之所以想写有关前端自动化工具的文章出于以下几个原因: 自动化构建工具对于前端开发的重要性:高...

iNiL0119
2016/11/04
16
0
前端工程化之路(一)基于Yeoman:Yo+grunt/gulp+bower 搭建前端工程

转载请加说明:http://my.oschina.net/panpcui/blog/671921 ,谢谢 引言 现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编...

小小实习生
2016/05/09
896
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
01/08
0
0
使用JavaScript构建工具和自动化系统

  JavaScript已经成为当今世界各地Web开发人员非常流行的工具。您可以构建大量项目,例如Web应用程序,移动应用程序等等。   然而,在开发过程中,一些任务是非常重要的,如缩小,单元测...

爱前端
2017/12/12
0
0
前端工具gulp的用途和使用方法

前端工具gulp的用途和使用方法 在接触前端开始就听说过grunt和gulp是很叼的前端构建工具,但不知道到底有多叼,只是听说可以自动编译less,sass为css,目前还没有使用less和sass,所以也就没...

writeademo
2016/10/18
25
0
Webpack 创始人:希望能有更多时间写更多代码

Tobias Koppers 是一位自由软件开发者,家住德国纽伦堡。他因写出 Webpack 这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于 JavaScript 和开源项目。以下是我对他个人的专访,希...

王练
05/06
0
0
gulp自动刷新浏览器

项目本地后端开发语言是是基于apache的php,域名为cloud.xxx.com。刚开始想实现浏览器F5自动刷新使用到的是grunt和livereload插件,gulp也有对应的方法,移步「gulp教程之gulp-livereload」。...

cobish
2016/04/14
1K
0
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
Tobias Koppers:我当初为什么写webpack

编者按:本文转载自众成翻译, 由为之漫笔翻译 Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScr...

奇舞周刊
04/23
0
0
gulp初次试用

我在用了grunt的一段时间内,越来越觉得自己离不开构建工具。但是,grunt的构建速度让我有点苦恼,即使是编译sass也需要花上一段时间。于是,我开始试用gulp,结果意外地让我惊喜。 下面代码...

cobish
2016/04/05
28
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 基础 - 远程仓库的使用

远程仓库的使用 要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库。远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写。同他人协作开发某...

谢思华
12分钟前
0
0
面试宝典-悲观锁和乐观锁

悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁。 乐观锁(Optimistic...

suyain
13分钟前
0
0
崛起于Springboot2.X之集成MongoDb使用mongoTemplate CRUD(27)

1、pom依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.7</version></dependency><dependency> <groupId>log4j</......

木九天
24分钟前
0
0
切分log日志

新建logback.xml放到resource里面 <?xml version="1.0" encoding="utf-8"?><configuration> <appender name="consoleLog" class="ch.qos.logback.core.ConsoleAppender"> <......

talen
29分钟前
0
0
spring @Resource 和 @Autowired 的使用区别

这两个 注解 @Resource 和 @Autowired , 常识都知道 @Resource 是 JAVAEE 自带的,@Autowired 是 spring 的自定义注解。 一般情况下, 使用 bean的时候, 这两个注解 随便使用一个即可。 但...

之渊
34分钟前
0
0
springboot集成elasticsearch客户端问题记录

1背景说明 服务端ES版本为5.5.2,springboot版本为1.5.6。 工程中添加如下依赖 2问题记录 2.1 NetworkPlugin类找不到 报错java.lang.ClassNotFoundException: org.elasticsearch.plugins.Net...

zjg23
36分钟前
1
0
快速构建ceph可视化监控系统

前言 ceph的可视化方案很多,本篇介绍的是比较简单的一种方式,并且对包都进行了二次封装,所以能够在极短的时间内构建出一个可视化的监控系统 本系统组件如下: ceph-jewel版本 ceph_expor...

万建宁
36分钟前
0
0
Java构造器使用注意

public class 父类A {int age = 10;protected void say() {System.out.println("父类A");}public 父类A() {override();}public void override() {Syst...

咸鱼AI
36分钟前
0
0
TensorFlow 线性分类

构造直线 z = 2 * x - 3 * y + 4 x0*w0+x1*w1+b=0 x1=-x0* w0/w1-b/w1 斜率 k= -w0/w1 截距 -b/w1 随机生成数据,加入一定的偏差,用直线将二维平面分为两部分 使用线性模型拟合参数 损失函数...

阿豪boy
39分钟前
0
0
翻译冒泡排序测试

翻译一个冒泡排序: var a = [1,3,2,4,6,5];var f = 0;var n = a.length ;for( var i =1; i<= n; i++) { for( var j = n-1 ; j >= i; j --) { if(a[j] < a[j+1]) { ......

钟元OSS
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部