FED实验室 - 专注WEB端开发和用户体验

Gulp——API

AUTOMATION 煦涵 3384℃ 0评论

一、实例

1.新建gulpfile.js文件:

var gulp = require('gulp'),
   uglify = require('gulp-uglify');

/*
 *创建minify任务
 *js文件夹中有一个文件名为app.js文件,这时在build/js/里会生成一个新的app.js文件
 *运行minify任务:gulp minify
 */

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

2.安装uglify :

npm install --save-dev gulp-uglify

 

3.我们来看看这个任务是如何工作的?
1)加载gulp和gulp-uglify模块

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

2)新建minify任务(运行时会执行回调函数)

gulp.task('minify', function () {

});

3)定义任务执行的内容

gulp.src('js/app.js')
   .pipe(uglify())
   .pipe(gulp.dest('build'))

 

二、API:

1.gulp.src()
@param : 一个通配符(一个字符可以匹配一个或多个文件),或者一个通配符数组
@return: 返回一个流,可以输送到插件
Gulp使用node-glob得到和你指定的通配符或者通配符数组相匹配的文件。下面看看一些例子:

js/app.js
Matches the exact file

js/*.js
Matches all files ending in .js in the js directory only

js/**/*.js
Matches all files ending in .js in the js directory and all child 
directories

!js/app.js
Excludes js/app.js from the match, which is useful if you want to match all files in a directory except for a particular file

*.+(js|css)
Matches all files in the root directory ending in .js or .css

demo:
//匹配js目录中的没压缩(.min.js)过的js文件
gulp.src(['js/**/*.js', '!js/**/*.min.js'])

 

2.gulp.task()
@param: taskName
@param: callback

1)define a task

gulp.task("greet",function() {
	console.log("Hello world!");
});

2)定义一个任务,可以执行三个任务

gulp.task("build",["js","css","img"]);

Tip:这些任务是异步执行,因此并不是js任务执行完成,才开始执行css任务,如果我们需要这么做,可以像下面这样设置依赖:

gulp.task("css",["js"],function() {
	//deal with css
});

3)定义一个默认任务,当gulp运行时自动运行

gulp.task("default",function() {
	//Your default task
});

三、参考链接

Building With Gulp

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址