gulp

1.简介

gulp：基于流的自动化构建工具。

关于流： gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件；

关于自动化和构建：请看例子

2.gulp例子与入门

前提:  1)已安装全局gulp，npm install gulp -g

         2)在cmder中进入到项目文件夹

自动编译（配filewatcher）

(1)先创建package.json文件。命令：npm init

(2)然后本地安装gulp-sass。命令：npm install gulp-sass –save-dev ，--save-dev作用是将该插件保存到package.json中的依赖插件（devDependencies）中

(3)根目录下创建gulpfile.js

这种情况下里面不需要内容

(4)创建相关文件如下结构：

 

(5)配置filewatcher建立scss文件的监听

点击红色框中+号，选中scss

将arguments改为--no-cache --update –style –compressed $FileName$:$FileNameWithoutExtension$.css，

第一句：无缓存 可更新 compressed格式（压缩）

第二句：文件名的格式

手动编译（没配filewatcher）

gulpfile.js

var gulp = require('gulp');     //要用到的模块
var sass = require('gulp-sass');
gulp.task('sass',function(){    //sass任务名
    gulp.src('src/sass/*.scss')
        .pipe(sass({outputStyle: 'expanded'}).on('error',sass.logError))    //输出类型
        .pipe(gulp.dest('src/sass/css'));           //输出路径
});

然后在命令行里 gulp sass

关于自动化：filewatcer建立监听，然后自动运行相关gulp命令

关于构建：各种gulp插件，gulp-sass等

3.gulp的api

gulp.src(): 输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个流它可以被 piped到别的插件中。

gulp.dest(): 能被 pipe 进来，并且将会写文件。如果某文件夹不存在，将会自动创建它。

gulp.task() :定义一个 实现的任务（task）。

gulp.watch(): 监视文件，并且可以在文件发生改动时候做一些事情。

详细的api请看：http://www.gulpjs.com.cn/docs/api/

4.编写gulp插件

未完待续

说明:供个人工作学习使用

转载于:https://my.oschina.net/wyc1219/blog/857225