注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梨花寨

 
 
 

日志

 
 
 
 

Gulp基础教程  

2016-09-25 19:13:05|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、安装Node

Gulp需要全局安装,然后再在项目的开发目录中安装为本地模块。

安装好node、npm环境后

导航到你的项目文件夹,然后执行

npm install -g gulp //安装全局gulp
npm install --save-dev gulp //安装本地gulp


二、设置Gulpfile.js文件

一旦Gulp安装完成之后,我们需要给它一些指令以便让它知道需要运行一些什么任务。

在实际的项目中,可能会需求做以下这些事情:

  1. 检查JavaScript代码错误
  2. 编译Sass文件
  3. 拼接JavaScript文件
  4. 精简并且重命名拼接后的文件
使用Gulp及gulp插件,可以轻松的完成上这些任务。

1、安装需要的插件,如:

npm install gulp-jshint --save-dev
npm install gulp-less --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev

3、项目根目录中的新建gulpfile.js,是Gulp的配置文件。下面就是一个的gulpfile.js示例文件。

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

上面代码中,gulpfile.js加载gulp和gulp-uglify模块之后,使用gulp模块的task方法指定任务minify。task方法有两个参数,第一个是任务名,第二个是任务函数。在任务函数中,使用gulp模块的src方法,指定所要处理的文件,然后使用pipe方法,将上一步的输出转为当前的输入,进行链式处理。
task方法的回调函数使用了两次pipe方法,也就是说做了两种处理。第一种处理是使用gulp-uglify模块,压缩源码;第二种处理是使用gulp模块的dest方法,将上一步的输出写入本地文件,这里是build.js(代码中省略了后缀名js)。
执行minify任务时,就在项目目录中执行下面命令就可以了。

gulp minify

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

gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});

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


三、gulp模块的方法(一些 API 的语法):
1、src()
gulp模块的src方法,用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。
js/app.js:指定确切的文件名。
js/*.js:某个目录所有后缀名为js的文件。
js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
!js/app.js:除了js/app.js以外的所有文件。
*.+(js css):匹配项目根目录下,所有后缀名为js或css的文件。
src方法的参数还可以是一个数组,用来指定多个成员。
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
2、dest()
dest方法将管道的输出写入文件,同时将这些输出继续输出,所以可以依次调用多次dest方法,将输出写入多个目录。如果有目录不存在,将会被新建。

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

dest方法还可以接受第二个参数,表示配置对象。

gulp.dest('build', {
cwd: './app',
mode: '0644'
})

配置对象有两个字段。cwd字段指定写入路径的基准目录,默认是当前目录;mode字段指定写入文件的权限,默认是0777。
3、task()
task方法用于定义具体的任务。它的第一个参数是任务名,第二个参数是任务函数。下面是一个非常简单的任务函数。

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

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

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

上面代码先指定build任务,它由css、js、imgs三个任务所组成,task方法会并发执行这三个任务。注意,由于每个任务都是异步调用,所以没有办法保证js任务的开始运行的时间,正是css任务运行结束。
如果希望各个任务严格按次序运行,可以把前一个任务写成后一个任务的依赖模块。

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

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

task方法的回调函数,还可以接受一个函数作为参数,这对执行异步任务非常有用。

// 执行shell命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// build Jekyll
exec('jekyll build', function(err) {
if (err) return cb(err); // return error
cb(); // finished task
});
});

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

gulp.task('default', function () {
// Your default task
});<span style="white-space:normal;">// 或者</span> <span style="white-space:normal;">gulp.task('default', ['styles', 'jshint', 'watch']);</span>

执行的时候,直接使用gulp,就会运行styles、jshint、watch三个任务。
4、watch()
watch方法用于指定需要监视的文件。一旦这些文件发生变动,就运行指定任务。

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

上面代码指定,一旦templates目录中的模板文件发生变化,就运行build任务。
watch方法也可以用回调函数,代替指定的任务。

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

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

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

除了change事件,watch方法还可能触发以下事件。
end:回调函数运行完毕时触发。
error:发生错误时触发。
ready:当开始监听文件时触发。
nomatch:没有匹配的监听文件时触发。

本文来源梨花寨,查看更多技术文章。








  评论这张
 
阅读(2)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018