06月08日
Gulp - 前端自动化构建

下面给大家讲解课题是《前端自动化开发- gulp 》。在座的同学估计有的已经听说过、或者已经用过的。不过都没关系,知道的同学当做是温习吧。以下是我要讲的四点:

一、简单介绍

1. gulp 是什么

gulp 它主要是用做文件合并、文件压缩、语法检查、监听文件变化的一个工具。

2.为什么选择 gulp

因为它与其他工具对比,更容易使用,api更加简单,这对于我们的工作效率有着很大的一个提升。其优点包含以下4点:

1.易于使用:通过代码优于配置的策略,gulp 让简单的任务简单,复杂的任务可管理。

2.构建快速: 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

3.插件高质: gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

4.易于学习: 通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

二、快速入门

1.在服务器端最容易的安装方式就是通过 npmnode.js 的包管理器),方法如下:

$ npm install -g gulp

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

$ npm install --save-dev gulp

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

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4.运行 gulp:

$ gulp

三、常用语法 

1.gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务(task)。

gulp.task('somename', function() {
  // 做一些事
});

name
任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格。

deps

类型: Array

一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

fn

该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())

2.gulp.src(globs[, options])

输出(Emits)符合所提供的匹配模式 (glob) 或者匹配模式的数组 (array of globs) 的文件。
将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

globs

类型: StringArray

options

类型: Object

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

3.gulp.dest(path[, options])

能被 pipe 进来,并且将会写文件。并且重新输出 (emits) 所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。

path

类型: StringFunction

options

类型: Object

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

4.gulp.watch(glob[, opts, cb])

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射 (emit)

globs

类型: StringArray

opts

类型: Object

cb

类型: Function

每次变动需要执行的 callback。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

四、资源

官网:http://www.gulpjs.com.cn/

个人项目实例:https://github.com/hwgq2005/gulp

这个是我很久之前在做团队做的一个分享,现在把他简单的整理下分享出来,希望对新人有所帮助。

Gen3062

2条评论

7777777777777777777777777777777777

穷小子4 个月前回复

66666666666666666666666666666666

我自安然4 个月前回复