Gulp学习笔记(一)

Glup是基于Node.js的Javascript库,是一个可以增强你的工作流程的自动化构建工具,让简单的任务简单,复杂的任务可管理。gulp开发社区正在快速成长,每天都会有新的插件诞生,访问主站查看完整的插件列表。

入门

1.安装

$ npm install --global gulp

2.在项目根目录下创建gulpfile.js:

var gulp = require('gulp');

gulp.task('compress', function(){
    // compress任务
});

gulp.task('default', function(){
    // 默认执行的任务
});

3.运行

//执行默认任务
$ gulp                      

//执行compress任务
$ gulp compress     

API说明

  • gulp.src(globs[, options])

返回能够匹配所提供的规则(globs: String 或 Array)的文件
可选参数:

optons: {
    buffer: true,    //返回的文件(`file.contentes`)的形式,默认为true;设为false,则以stream形式返回
    read: true,      //设置为false,则返回的`file.conetnts`为null
    base: ''          //目标匹配路径
}

下面用具体例子看看options.base的作用:

  //假设文件 asset/script/component/hello.js, 默认情况下`base`被解析为`asset/script/`
  gulp.src('asset/script/**/*.js')    
        .pipe(minify())
        .pipe(gulp.dest('build'));    //写入路径:build/component/hello.js

  
  gulp.src('asset/script/**/*.js', {base: 'asset'})  
        .pipe(minify())
        .pipe(gulp.dest('build'));    //写入路径:build/script/component/hello.js

  • gulp.dest(path[, options])

写入文件到目标路径,如果文件夹不存在,将会自动创建它。
可选参数:

options: {
    cwd: process.cwd(),     //操作目录,默认为当前目录
    mode: 0777                 //目录权限
}
  • gulp.task(name [, deps], fn)

定义一个任务。name为任务名称,不能使用空格;deps:任务列表,这些任务会在当前任务运行之前完成;fn:该任务要执行的操作。

  • gulp.watch(glob [, options], tasks) or gulp.watch(glob [, options, cb])

监视文件,并且可以在文件发生改动的时候做一些事情。每次发送变化都会派发change事件。
用法:

  1. 在文件变动后执行一个或多个任务
var watcher = gulp.watch('asset/script/**/*.js', ['jslint', 'reload']);
watcher.on('change', function(event){
       console.log(`File ${event.path} was ${event.type}, running tasks....`);
});

2.在文件变动后执行callback

gulp.watch('asset/script/**/*.js', function(event){
    console.log(`File ${event.path} was ${event.type}, running tasks....`);
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 540评论 0 0
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,175评论 7 55
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,398评论 1 11
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,321评论 0 10
  • 写在前面 :之前文章介绍了打包工具webpack的一些情况,而今天要讲的gulp是前端开发过程中一种基于流的代码构...
    nightZing阅读 662评论 0 4