gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握。利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发。本文简单讲一下入门gulp需要掌握的东西。

安装gulp

首先,我们需要在全局安装gulp。

npm install -g gulp

然后,我们切到项目根目录,在项目中也进行gulp的安装,表明项目对gulp的依赖。

npm install --save-dev gulp

接着,我们在项目根目录里新建一个gulpfile.js文件,这个是gulp的配置文件。

使用gulp

学习gulp的使用,我们需要先学习好常用的语法。

gulp.src(globs[, options])

输出符合所匹配模式(glob)的文件。将返回一个stream,可以被piped传递到其他gulp插件中继续操作。

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

定义一个gulp任务,name是任务名称。[, deps]是任务依赖。fn是任务回调函数。

(1)任务依赖的形式可以是:

gulp.task('two', ['one'], function() {
// 'one' 完成后
});
gulp.task('one', function(cb) {
// cb();
// return stream;
// return promise;
});

其中one应该使用一个callback,或者返回一个promise 或stream,表明依赖的任务完成了。

(2)回调函数体会是这种形式:

gulp.src().pipe(someplugin())

gulp.dest(path[, options])

将pipe进来的stream输出文件到指定的路径下,如:

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

gulp.watch

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

监视文件,并且在文件发生改动时候执行一个或者多个task。监听change事件实现。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

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

监视文件,并且在文件发生改动时候执行回调函数cb。

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

gulp.run

gulp模块的run方法,表示要执行的任务。可能会使用单个参数的形式传递多个任务。任务是尽可能多的并行执行,并且可能不会按照指定的顺序执行。当不需要指定执行顺序时,可以适当使用。

gulp.run('task1','task2','task3');

gulp使用技巧

替代任务依赖写法

我们需要让任务有秩序地执行,那么可以使用第三方插件gulp-sequence。

// 如果使用gulp-sequence,就不需要附加任务依赖了。数组内的任务平行执行,数组外的按顺序执行。所以这里是svgstore、uglify-js并行执行,然后执行public任务。
gulp.task('sequence1', function() {
sequence(['svgstore', 'uglify-js'], 'public');
});

修复gulp.watch方法只执行一次的问题

利用gulp-watch,gulp-batch两个工具,用法如下:

// 当监听到svgs目录下任意svg文件变动时,执行svgstore任务
gulp.task('watch', function() {
watch('./assets/svgs/*.svg', batch(function(events, done) {
gulp.start('svgstore', done);
}));
});

前端自动化工具gulp入门基础的更多相关文章

  1. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  2. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  3. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  4. 前端自动化工具 -- Gulp 使用简介

    gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用 ...

  5. 前端自动化工具 -- gulp https://angularjs.org/

    gulp是基于流的前端自动化构建工具. gulp是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 二.基本用法--插件使用 gu ...

  6. 前端自动化工具 gulp

    最近一个项目才接触这些自动化工具 webpack gulp grunt 等等.. webpack 可以引入模块 和 压缩 gulp 和 grunt 可以压缩 这里只说下gulp  因为项目里只用到gu ...

  7. 安装并配置前端自动化工具-gulp

    由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...

  8. 【gulp】前端自动化工具---gulp的使用(一)------【巷子】

    什么是gulp?   基于node的自动化构建工具   扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段        开发阶段:源文件不会被压缩            部署阶段:所有文 ...

  9. 前端构建工具gulp入门教程(share)

    参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文 ...

随机推荐

  1. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. MyEclipse各种版本号注冊码

    一:MyEclipse_6.0.1GA_E3.3.1_FullStackInstaller注冊码 Subscriber:javp Subscription Code:wLR7ZL-655551-685 ...

  3. wxWidgets谁刚开始学习指南(5)——使用wxSmith可视化设计

    wxWidgets谁刚开始学习的整个文件夹指南   PDF版及附件下载 1 前言2 下载.安装wxWidgets3 wxWidgets应用程序初体验4 wxWidgets学习资料及利用方法指导5 用w ...

  4. 关于java中继承抽象类和实现接口的区别

    简单来说,继承就是“是不是”,实现就是“有没有”.(一个大神说的,我觉得很生动很形象 海子大神链接http://www.cnblogs.com/dolphin0520/p/3811437.html)

  5. 将 WPF、UWP 以及其他各种类型的旧 csproj 迁移成基于 Microsoft.NET.Sdk 的新 csproj

    原文 将 WPF.UWP 以及其他各种类型的旧 csproj 迁移成基于 Microsoft.NET.Sdk 的新 csproj 写过 .NET Standard 类库或者 .NET Core 程序的 ...

  6. Cocos2d-X之LUA注意事项

    「使用计时器」: 计时器函数原型:unsigned int scheduleScriptFunc(unsigned int handler, float interval, bool paused) ...

  7. JDBC学习笔记——简单的连接池

    1.使用LinkedList保存连接                                                               即使是最简单的JDBC操作,也需要包含 ...

  8. 避免让WPF资源字典变得杂乱臃肿

    原文:避免让WPF资源字典变得杂乱臃肿   避免让WPF资源字典变得杂乱臃肿                            周银辉 今天看到项目种的一个XXXResource.xaml文件代码 ...

  9. cocos2d 滚动背景 举 无限

    void Bird::update(float time){ auto bg=this->getChildByTag(200); auto bg1=this->getChildByTag( ...

  10. DELPHI7中 TObjectList sort排序问题

    网上收集了一点东西 TOBJECTLIST里,有自带的排序功能 TLIST,TSTRINGLIST也有,MS是一样的 SORT里有一个参数: Compare:TListSortCompare 那我们先 ...