gulp

最新推荐文章于 2025-06-12 17:11:27 发布

转载最新推荐文章于 2025-06-12 17:11:27 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bldf/p/5419428.html

文章标签：

#javascript #ViewUI

一、gulp的安装

1.1 全局安装gulp:

$ gulp

1.2 作为项目的开发依赖安装（devDpendencies）

$ npm install --save-dev gulp

1.3 在项目的更目录下创建一个名为 gulpfile.js 的文件

1.4 运行gulp:

$ gulp

注意：直接以gulp运行只会执行'default'默认任务,若想运行自定义的任务，请输入 gulp yourtask 。

二、gulp API

2.1 gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。

2.2 gulp.dest(path[, options])

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

2.3 gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

2.3.1 gulp.watch(glob [, opts], tasks)

glob

类型： String or Array

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

opts

类型： Object

tasks

类型： Array

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

event.type

类型： String

发生的变动的类型：added, changed 或者 deleted。

event.path

类型： String

触发了该事件的文件的路径。

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

cb(event)

类型： Function

每次变动需要执行的 callback。

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

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

2.4.1 定义一个名为 somename 的任务（task）

2.4.1.1 获取开发需要的文件

2.4.1.2 编译less/scss文件

2.4.1.3 编译jade文件

pretty: true 作用是

2.4.1.4 创建监视任务

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

命令行：

任务执行的顺序是'public' , 'sass' , 'jade' , 'wacthJade' > 'mytask'。

2.3 异步任务支持

任务可以异步执行，如果 fn 能做到以下其中一点：

接受一个 callback

三、一些常用的gulp-plugin

No.1 gulp-autoprofixer

No.2 gulp-concat

No.3 gulp-imagemin

No.4 gulp-jade

No.5 gulp-less

No.6 gulp-minify

No.7 gulp-sass

No.8 gulp-uglify

No.9 gulp-util

结尾附上github上gulp的一个gulpfile.js：

  1 var gulp = require('gulp');
  2 var coffee = require('gulp-coffee');
  3 var concat = require('gulp-concat');
  4 var uglify = require('gulp-uglify');
  5 var imagemin = require('gulp-imagemin');
  6 var sourcemaps = require('gulp-sourcemaps');
  7 var del = require('del');
  8 
  9 var paths = {
 10   scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
 11   images: 'client/img/**/*'
 12 };
 13 
 14 // Not all tasks need to use streams
 15 // A gulpfile is just another node program and you can use any package available on npm
 16 gulp.task('clean', function() {
 17   // You can use multiple globbing patterns as you would with `gulp.src`
 18   return del(['build']);
 19 });
 20 
 21 gulp.task('scripts', ['clean'], function() {
 22   // Minify and copy all JavaScript (except vendor scripts)
 23   // with sourcemaps all the way down
 24   return gulp.src(paths.scripts)
 25     .pipe(sourcemaps.init())
 26       .pipe(coffee())
 27       .pipe(uglify())
 28       .pipe(concat('all.min.js'))
 29     .pipe(sourcemaps.write())
 30     .pipe(gulp.dest('build/js'));
 31 });
 32 
 33 // Copy all static images
 34 gulp.task('images', ['clean'], function() {
 35   return gulp.src(paths.images)
 36     // Pass in options to the task
 37     .pipe(imagemin({optimizationLevel: 5}))
 38     .pipe(gulp.dest('build/img'));
 39 });
 40 
 41 // Rerun the task when a file changes
 42 gulp.task('watch', function() {
 43   gulp.watch(paths.scripts, ['scripts']);
 44   gulp.watch(paths.images, ['images']);
 45 });
 46 
 47 // The default task (called when you run `gulp` from cli)
 48 gulp.task('default', ['watch', 'scripts', 'images']);