gulp 讲解github上gulp-run-coffee

gulp入门： 

一、安装gulp

1、深入设置任务之前，需先安装gulp：

$ npm install gulp -g

2、这会将gulp安装到全域环境下，让你可以存取gulp的CLI。接著，需要在本地端的专案进行安装。cd到你的专案根目录，执行下列指令(请先确定你有package.json档案)：

$ npm install gulp --save-dev

二、生成文件结构

 （生成node_modules文件）

 

三、创建gulpfile.js文件

var gulp = require('gulp'),
uglify = require("gulp-uglify"); 　　//uglify为JS压缩

gulp.task('default',['js'], function(){
console.log('js file is beginning...');
});

gulp.task('js', function(){
console.log('>>>start task:js');

gulp.src('scripts/app/reactTest/reactTest.js') 　　//需要打包的目录文件
.pipe(uglify())  　　//uglify为JS压缩
.pipe(gulp.dest('compressfile/js')); 　　//打包到目标位置
});

四、然后执行

在cmd 执行gulp default 或者 cd到项目目录执行命令 gulp --gulpfile gulpfile.js

下载文件代码 在GIT上

 

五、webstorm 运行配置gulp

 

打开Run/Debug Configurations，设置

 

 

 

 

 

 

======>开始讲解自己github上gulp-run-coffee的gulp代码

github地址：https://github.com/babyfacer0104

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

console.log('<<<<<<<<<<coffee编辑成js');

return gulp.src(paths.coffee[0]) //该任务针对的文件(src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流（readableStream）)

.pipe(coffee()) //该任务调用的模块
//pipe方法传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)。
//注意的是这个函数只是一个包装，并不是会直接操作文件的。

.pipe(gulp.dest('./js'));//dest方法是指定处理完后文件输出的路径
});

tap()：gulp-tap 这个插件很有作用，它可以用来遍历 gulp.src() 指定的那些文件；利用这个特性，以及npm下自带的 path 插件，即可获取到每个文件的文件名.
eg:
gulp.src("src/**/*.{coffee,js}")
.pipe(tap(function(file, t) {
if (path.extname(file.path) === '.coffee') {
         return t.through(coffee, []);
}
}))
.pipe(gulp.dest('build'));