转载:http://segmentfault.com/blog/laopopo/1190000000372547

http://javascript.ruanyifeng.com/tool/gulp.html

本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。

第一步:安装Node

首先,最基本也最重要的是,我们需要搭建node环境。访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。

第二步:使用命令行

也许现在你还不是很了解什么是命令行——OSX中的终端(Terminal),windows中的命令提示符(Command Prompt),但很快你就会知道。它看起来没那么简单,但一旦掌握了它的窍门,就可以很方便的执行很多命令行程序,比如Sass,Yeoman和Git等,这些都是非常有用的工具。

如果你很熟悉命令行,直接跳到步骤四。

为了确保Node已经正确安装,我们执行几个简单的命令。

  1. node -v

回车(Enter),如果正确安装的话,你会看到所安装的Node的版本号,接下来看看npm。

  1. npm -v

这同样能得到npm的版本号。

如果这两行命令没有得到返回,可能node就没有安装正确,尝试重启下命令行工具,如果还不行的话,只能回到第一步进行重装。

第三步:定位到项目

现在,我们已经大致了解了命令行并且知道如何简单使用它,接下来只需要两个简单的命令就能定位到文件目录并看看目录里都有些什么文件。

  1. cd,定位到目录
  2. ls,列出文件列表

建议多敲敲这两个命令,了解文件系统并知道文件都在哪里。

习惯使用了这两个命令后,就要进入我们的项目目录,这个目录各不相同,举个例子,这是我进入我项目目录的命令:

  1. cd /Applications/XAMPP/xamppfiles/htdocs/my-project

成功进入项目目录后,我们开始安装gulp。

第四步:安装gulp

我们已经知道如何使用命令行,现在尝试点新的东西,认识npm然后安装gulp。

NPM是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的官网中可以查看和搜索所有可用的程序模块。

在命令行中输入

  1. sudo npm install -g gulp
  1. sudo是以管理员身份执行命令,一般会要求输入电脑密码
  2. npm是安装node模块的工具,执行install命令

  3. -g表示在全局环境安装,以便任何项目都能使用它

  4. 最后,gulp是将要安装的node模块的名字

运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

  1. gulp -v

接下来,我们需要将gulp安装到项目本地

  1. npm install —-save-dev gulp

这里,我们使用—-save-dev来更新package.json文件,更新devDependencies值,以表明项目需要依赖gulp。

Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看package.json文档

第五步:新建Gulpfile文件,运行gulp

安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务。

  • 检查Javascript
  • 编译Sass(或Less之类的)文件
  • 合并Javascript
  • 压缩并重命名合并后的Javascript

安装依赖

  1. npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下,如果以上命令提示权限错误,需要添加sudo再次尝试。

新建gulpfile文件

现在,组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

gulp只有五个方法: taskrunwatchsrc,和dest,在项目根目录新建一个js文件并命名为gulpfile.js,把下面的代码粘贴进去:

gulpfile.js

  1. // 引入 gulp
  2. var gulp = require('gulp');
  3. // 引入组件
  4. var jshint = require('gulp-jshint');
  5. var sass = require('gulp-sass');
  6. var concat = require('gulp-concat');
  7. var uglify = require('gulp-uglify');
  8. var rename = require('gulp-rename');
  9. // 检查脚本
  10. gulp.task('lint', function() {
  11. gulp.src('./js/*.js')
  12. .pipe(jshint())
  13. .pipe(jshint.reporter('default'));
  14. });
  15. // 编译Sass
  16. gulp.task('sass', function() {
  17. gulp.src('./scss/*.scss')
  18. .pipe(sass())
  19. .pipe(gulp.dest('./css'));
  20. });
  21. // 合并,压缩文件
  22. gulp.task('scripts', function() {
  23. gulp.src('./js/*.js')
  24. .pipe(concat('all.js'))
  25. .pipe(gulp.dest('./dist'))
  26. .pipe(rename('all.min.js'))
  27. .pipe(uglify())
  28. .pipe(gulp.dest('./dist'));
  29. });
  30. // 默认任务
  31. gulp.task('default', function(){
  32. gulp.run('lint', 'sass', 'scripts');
  33. // 监听文件变化
  34. gulp.watch('./js/*.js', function(){
  35. gulp.run('lint', 'sass', 'scripts');
  36. });
  37. });

现在,分段解释下这段代码。

引入组件

  1. var gulp = require('gulp');
  2. var jshint = require('gulp-jshint');
  3. var sass = require('gulp-sass');
  4. var concat = require('gulp-concat');
  5. var uglify = require('gulp-uglify');
  6. var rename = require('gulp-rename');

这一步,我们引入了核心的gulp和其他依赖组件,接下来,分开创建lint, sass, scripts 和 default这四个不同的任务。

Lint任务

  1. gulp.task('lint', function() {
  2. gulp.src('./js/*.js')
  3. .pipe(jshint())
  4. .pipe(jshint.reporter('default'));
  5. });

Link任务会检查js/目录下得js文件有没有报错或警告。

Sass任务

  1. gulp.task('sass', function() {
  2. gulp.src('./scss/*.scss')
  3. .pipe(sass())
  4. .pipe(gulp.dest('./css'));
  5. });

Sass任务会编译scss/目录下的scss文件,并把编译完成的css文件保存到/css目录中。

Scripts 任务

  1. gulp.task('scripts', function() {
  2. gulp.src('./js/*.js')
  3. .pipe(concat('all.js'))
  4. .pipe(gulp.dest('./dist'))
  5. .pipe(rename('all.min.js'))
  6. .pipe(uglify())
  7. .pipe(gulp.dest('./dist'));
  8. });

scripts任务会合并js/目录下得所有得js文件并输出到dist/目录,然后gulp会重命名、压缩合并的文件,也输出到dist/目录。

default任务

  1. gulp.task('default', function(){
  2. gulp.run('lint', 'sass', 'scripts');
  3. gulp.watch('./js/*.js', function(){
  4. gulp.run('lint', 'sass', 'scripts');
  5. });
  6. });

这时,我们创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务,使用.watch()方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。

现在,回到命令行,可以直接运行gulp任务了。

  1. gulp

这将执行定义的default任务,换言之,这和以下的命令式同一个意思

  1. gulp default

当然,我们可以运行在gulpfile.js中定义的任意任务,比如,现在运行sass任务:

  1. gulp sass

(Kimi: 哇塞,酷比了哎~)

结束语

现在已经做到了设置gulp任务然后运行他们,现在再回顾下之前学习的。

  1. 学习了安装Node环境
  2. 学习了简单使用命令行
  3. 学习了用命令行进入项目目录
  4. 学习了使用npm和安装gulp
  5. 学习了如何运行gulp任务

另外,有一些参考资源供进一步学习:

  1. npm上得gulp组件
  2. gulp的Github主页
  3. 官方package.json文档

本文译自http://travismaynard.com/writing/getting-started-with-gulp

2.

Gulp:任务自动管理工具

来自《JavaScript 标准参考教程(alpha)》,by 阮一峰

Gulp与Grunt一样,也是一个自动任务运行器。它充分借鉴了Unix操作系统的管道(pipe)思想,很多人认为,在操作上,它要比Grunt简单。

安装

Gulp需要全局安装,然后再在项目的开发目录中安装为本地模块。先进入项目目录,运行下面的命令。

  1. npm install -g gulp
  2. npm install --save-dev gulp

gulpfile.js

项目根目录中的gulpfile.js,是Gulp的配置文件。它大概是下面的样子。

  1. var gulp = require('gulp');
  2. gulp.task('default', function () {
  3. });

下面就是一个典型的gulpfile.js文件。

  1. var gulp = require('gulp'),
  2. uglify = require('gulp-uglify');
  3. gulp.task('minify', function () {
  4. gulp.src('js/app.js')
  5. .pipe(uglify())
  6. .pipe(gulp.dest('build'))
  7. });

上面代码中使用了gulp-uglify模块。在此之前,需要先安装这个模块。

  1. npm install --save-dev gulp-uglify

gulpfile.js加载gulp和gulp-uglify模块之后,使用gulp模块的task方法指定任务。task方法有两个参数,第一个是任务名,第二个是任务函数。在任务函数中,使用gulp模块的src方法,指定所要处理的文件,然后使用pipe方法,将上一步的输出转为当前的输入,进行链式处理。

在上面代码中,使用两次pipe方法,也就是说做了两种处理。第一种处理是使用gulp-uglify模块,压缩源码;第二种处理是使用gulp模块的dest方法,将上一步的输出写入本地文件,这里是build.js(代码中省略了后缀名js)。

从上面的例子中可以看到,gulp充分使用了“管道”思想,就是一个数据流(stream):src方法读入文件产生数据流,dest方法将数据流写入文件,中间是一些中间步骤,每一步都对数据流进行一些处理。

下面是另一个数据流的例子。

  1. gulp.task('js', function () {
  2. return gulp.src('js/*.js')
  3. .pipe(jshint())
  4. .pipe(uglify())
  5. .pipe(concat('app.js'))
  6. .pipe(gulp.dest('build'));
  7. });

上面代码使用pipe命令,分别进行jshint、uglify、concat三步处理。

gulp.src()

gulp模块的src方法,用于产生数据流。它的参数表示所要处理的文件,一般有以下几种形式。

  • js/app.js:指定确切的文件名。
  • js/*.js:某个目录所有后缀名为js的文件。
  • js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
  • !js/app.js:除了js/app.js以外的所有文件。
  • *.+(js|css):匹配项目根目录下,所有后缀名为js或css的文件。

src方法的参数还可以是一个数组,用来指定多个成员。

  1. gulp.src(['js/**/*.js', '!js/**/*.min.js'])

gulp.task()

gulp模块的task方法,用于定义具体的任务。它的第一个参数是任务名,第二个参数是任务函数。下面是一个非常简单的任务函数。

  1. gulp.task('greet', function () {
  2. console.log('Hello world!');
  3. });

task方法还可以指定按顺序运行的一组任务。

  1. gulp.task('build', ['css', 'js', 'imgs']);

上面代码先指定build任务,它按次序由css、js、imgs三个任务所组成。注意,由于每个任务都是异步调用,所以没有办法保证js任务的开始运行的时间,正是css任务运行结束。

如果希望各个任务严格按次序运行,可以把前一个任务写成后一个任务的依赖模块。

  1. gulp.task('css', ['greet'], function () {
  2. // Deal with CSS here
  3. });

上面代码表明,css任务依赖greet任务,所以css一定会在greet运行完成后再运行。

如果一个任务的名字为default,就表明它是“默认任务”,在命令行直接输入gulp命令,就会运行该任务。

  1. gulp.task('default', function () {
  2. // Your default task
  3. });

gulp.watch()

gulp模块的watch方法,用于指定需要监视的文件。一旦这些文件发生变动,就运行指定任务。

  1. gulp.task('watch', function () {
  2. gulp.watch('templates/*.tmpl.html', ['build']);
  3. });

上面代码指定,一旦templates目录中的模板文件发生变化,就运行build任务。

watch方法也可以用回调函数,代替指定的任务。

  1. gulp.watch('templates/*.tmpl.html', function (event) {
  2. console.log('Event type: ' + event.type);
  3. console.log('Event path: ' + event.path);
  4. });

另一种写法是watch方法所监控的文件发生变化时(修改、增加、删除文件),会触发change事件。可以对change事件指定回调函数。

  1. var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
  2. watcher.on('change', function (event) {
  3. console.log('Event type: ' + event.type);
  4. console.log('Event path: ' + event.path);
  5. });

除了change事件,watch方法还可能触发以下事件。

  • end:回调函数运行完毕时触发。
  • error:发生错误时触发。
  • ready:当开始监听文件时触发。
  • nomatch:没有匹配的监听文件时触发。

watcher对象还包含其他一些方法。

  • watcher.end():停止watcher对象,不会再调用任务或回调函数。
  • watcher.files():返回watcher对象监视的文件。
  • watcher.add(glob):增加所要监视的文件,它还可以附件第二个参数,表示回调函数。
  • watcher.remove(filepath):从watcher对象中移走一个监视的文件。

gulp-load-plugins模块

一般情况下,gulpfile.js中的模块需要一个个加载。

  1. var gulp = require('gulp'),
  2. jshint = require('gulp-jshint'),
  3. uglify = require('gulp-uglify'),
  4. concat = require('gulp-concat');
  5. gulp.task('js', function () {
  6. return gulp.src('js/*.js')
  7. .pipe(jshint())
  8. .pipe(jshint.reporter('default'))
  9. .pipe(uglify())
  10. .pipe(concat('app.js'))
  11. .pipe(gulp.dest('build'));
  12. });

上面代码中,除了gulp模块以外,还加载另外三个模块。

这种一一加载的写法,比较麻烦。使用gulp-load-plugins模块,可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写,就是下面这样。

  1. var gulp = require('gulp'),
  2. gulpLoadPlugins = require('gulp-load-plugins'),
  3. plugins = gulpLoadPlugins();
  4. gulp.task('js', function () {
  5. return gulp.src('js/*.js')
  6. .pipe(plugins.jshint())
  7. .pipe(plugins.jshint.reporter('default'))
  8. .pipe(plugins.uglify())
  9. .pipe(plugins.concat('app.js'))
  10. .pipe(gulp.dest('build'));
  11. });

上面代码假设package.json文件包含以下内容。

  1. {
  2. "devDependencies": {
  3. "gulp-concat": "~2.2.0",
  4. "gulp-uglify": "~0.2.1",
  5. "gulp-jshint": "~1.5.1",
  6. "gulp": "~3.5.6"
  7. }
  8. }

gulp-livereload模块

gulp-livereload模块用于自动刷新浏览器,反映出源码的最新变化。它除了模块以外,还需要在浏览器中安装插件,用来配合源码变化。

  1. var gulp = require('gulp'),
  2. less = require('gulp-less'),
  3. livereload = require('gulp-livereload'),
  4. watch = require('gulp-watch');
  5. gulp.task('less', function() {
  6. gulp.src('less/*.less')
  7. .pipe(watch())
  8. .pipe(less())
  9. .pipe(gulp.dest('css'))
  10. .pipe(livereload());
  11. });

上面代码监视less文件,一旦编译完成,就自动刷新浏览器。

gulp用法的更多相关文章

  1. gulp 用法 小结

    前端们,gulp该用起来了,简单的demo入门 gulp.grunt前端自动化工具,只有用过才知道多么重要. 作者:一文不提来源:博客园|2015-05-28 10:35 移动端 收藏 分享 gulp ...

  2. gulp插件(gulp-jmbuild),用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  3. iBrand 开源电商小程序 (Laravel API+ webpack + gulp + 原生小程序)

    iBrand 社交电商产品正式进入开源过程中了,我们制定了详细的开源计划,目前已经发布了 V1 的版本,后续的版本也在陆续整理完善中. 各个版本功能明细如下图: 3 个版本计划在今年春节前全部完成,可 ...

  4. 应用gulp工具构建个自动算rem布局的小例子

    因为最近可能需要做移动端rem布局,因为rem布局需要将px转化成rem,如果次都需要拿计算器算就太low了,所以就想到用less和gulp. 因为也是初学gulp,站点的文件结构还没想到太好,也只是 ...

  5. gulp的基本用法

    这几天简单的研究了一下gulp的用法,gulp对于初学者来说还是很友好的. 官方给出gulp的优点如下: 1.通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 2.Gulp 严格 ...

  6. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  7. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  8. gulp基本用法

    嗨,小伙伴们,大家周五好,又到了一周中最最最期待的周五啦啦~~~ 这几天一直在研究gulp的使用方法,今天抽时间来整理一下基本步骤. gulp 的使用流程: 安装nodejs ->安装git(方 ...

  9. yarn依赖管理工具,和fis3构建工具 gulp详细用法

    看视频所了解到的,正在进行摸索. 参考:https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒,唯一有一点,页面随时刷新的目前还没实现,不知 ...

随机推荐

  1. SQL 合并列值和拆分列值

    合并列值 表结构,数据如下: id value ----- ------ aa bb aaa bbb ccc 需要得到结果: id values ------ ----------- aa,bb aa ...

  2. git 查看当前与上一次version的差异

    http://stackoverflow.com/questions/9903541/finding-diff-between-current-and-last-versions up vote47d ...

  3. 网站网址前的小logo

    认识网页前小图标 1.能在浏览器标签.地址栏左边和收藏夹栏显示小图标的网站,其网站都是使用了其名称为"favicon.ico"图标文件,格式为ico格式,图标大小一般为16*16, ...

  4. java 常见异常总结

    异常1:java.util.NoSuchElementException: No line found 原因:Java 是顺序执行的 你执行到.close() 后就代表 你关闭了 流,你再去调用已经被 ...

  5. ubuntu apache2 流量限制模块

    mod-bw is an Apache 2 module provided to solve the problem of limiting users’ and virtual hosts’ ban ...

  6. Windows恢复Grub引导,用grub安装ubuntu

    http://www.linuxidc.com/wap.aspx?nid=18027&p=&cp=&cid=http://m.blog.chinaunix.net/uid-22 ...

  7. PAT1015

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  8. L2,breakfast or lunch

    express: what a day多么糟糕的天气 I‘m coming to see you我将要来看你 what a lot of trouble he is causing他犯了多少错误啊 w ...

  9. 转:web_reg_save_param的使用详解

    [摘要]利用实际案例说明如何使用Mercury LoadRunner提取包含在 HTML 页内的动态信息并创建参数. [关键词]性能测试,压力测试,Mercury LoadRunner 应用范围 在使 ...

  10. 进程间通信——FIFO(多个客户进程,一个服务进程)

    FIFO简介 FIFO就是Unix的一种复合POSIX标准的进程间通信机制.他又称为命名管道,跟管道的不同点是,每个FIFO都有一个路径名与之关联. FIFO虽然有路径名,但是他这中文件是在内核态(管 ...