hello gulp,使用gulp的第一天。

  昨天花了一天的时间,学习了一下gulp,今天整理一下,也分享给朋友们。
  首先当然是去gulp的官网逛一圈了:
  http://gulpjs.com/
  中文站地址:
  http://www.gulpjs.com.cn/
  里边有入门指南,如下:
  
  1. 全局安装 gulp:

$npm install --global gulp

  
  2. 在项目根目录创建package.json文件,可以手动创建,也可以用这行命令自动化完成:
  

$ cd <yourworkspacePath>
$ npm init

  3. 作为项目的开发依赖(devDependencies)安装

$ npm install --save-dev gulp

  4. 在项目根目录下创建一个名为 gulpfile.js 的文件:

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  console.log("hello gulp!");
});

  5. 运行 gulp

$ gulp

  不过还是要有一些细节需要注意
  1.在windows环境下命令当然就不要加那个$符号了。
  
  2.网上还有一种npm install –global gulp-cli这种全局安装的方法,那么gulp和gulp-cli有什么不同呢?答案在这里:
  http://stackoverflow.com/questions/35571679/what-does-gulp-cli-stands-for

  3.为什么要在全局装一个gulp又要在本地项目装一个gulp呢?
  因为方便版本控制。不同的项目可以使用不同版本的gulp而不互相影响,就是这样喽。
  
  等等,等等,很容易走到这里的我,还是没搞懂一件事,我们为什么要用gulp。为什么不是grunt而是gulp。还有一些相似的功能的webpack,为什么是gulp!于是,我查到了这些:
  为什么是gulp不是grunt
  http://slides.com/contra/gulp#/
  gulp跟webpack又是啥关系:
  https://www.zhihu.com/question/37020798(感谢知乎)
  如果这些都不是你关心的问题,你可能是想问:为啥要用gulp或者grunt
  借用grunt中文网的一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。
  
  好了,解决了这么多个为什么以后,我们继续gulp的学习之旅。就在刚刚,我们已经装好了gulp,那么我们下面就开始我们的工作吧。
  假如说,我们需要给js文件进行压缩这样一件事,那么我们最原始的方式,可以把代码拷贝到压缩工具里,然后让工具压缩了,我们再拷出来放到我们的工程里。如果用gulp的话呢,我们就可以不用这么麻烦了,我们只需要做这几件事:
  
  1.安装gulp的js压缩插件
  npm install –save-dev gulp uglify
  (大家应该注意到了吧,–save-dev的意思就是把这个插件的安装信息写入到我们的package.json文件里的意思)
  
  2.在gulpfile.js里配置任务

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
gulp.task('compile-js',function(){
    return gulp.src(<你要压缩的js文件路径>)
    .pipe(uglify())
    .pipe(gulp.dest(<你要输出的文件路径>));
});

  写好以后,运行 gulp compile-js
  这样看是不是很简单,哈哈。你可能觉得,这没那么简单啊,还要写代码,好麻烦。那是因为你只压缩了一个文件啊,如果让你压缩十个以上的文件,在压缩工具里拷贝来拷贝去都会弄错吧,但是如果用gulp,工作量一点都没有增加,还是这一小段代码就搞定。同样的,css,html的压缩,sass的解译都可以在这里完成,相比以前用多个工具软件切来切去方便的就不是一点半点了。
  
  当然啦,这里边还是有一些小坑的哦。首先是gulp的api你需要学习,要不然你怎么知道怎么建任务,怎么制定源文件和目标文件呢。
  http://www.gulpjs.com.cn/docs/api/
  这个小栗子就完了,不过呢,还有一些常用的功能,对应一些常用的插件,来做介绍:
  http://www.cnblogs.com/2050/p/4198792.html
  上边这篇文章的第四部分,插件部分讲的很好哦。

  然后就是一些小技巧,比如说watch和changed的事:
  http://www.tuicool.com/articles/2miAvyu
  上边这篇文章是一篇踩坑文,感谢朋友们的分享。
  
  还有一个小技巧,那就是如何删掉某一个插件,就比如你某个插件装坏了,或者你不需要了,你就这样:
  npm uninstall –save <插件全名>
  比如我们刚才的gulp-uglify
  npm uninstall –save gulp-uglify
  感谢网友们的无私分享!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值