gulp 学习笔记

gulp官网
gulp中文网

自己对gulp简单的理解使用， 详细深入的学习，请移步官网。

---

新建一个测试项目文件夹 E:\gulplearn ,在gulplearn中新建一个gulpfile.js文件， 右键 git bash here 打开控制台。初始化package.json文件，填入相关信息。

$ npm init  //初始化package.json文件

1. 全局安装gulp

$ npm install gulp -g

2. 作为项目的依赖安装

$ npm install gulp --save-dev

打开gulplearn目录下的gulpfile.js文件 ，编辑代码。

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('taskName',function(){
    gulp.src('js/a.js') //文件路径 可正则   即处理哪个/哪些文件
    .pipe(uglify())  //要处理的事情 压缩/合并 css/js 等等
    .pipe(gulp.dest('js.min')); //目标路径 即处理完后文件存哪
});

$ gulp taskName  //执行任务名

gulp API

— gulp.src( globs [, options]);

globs类型 : String or Array
1--gulp.src('js/a.js');
2--gulp.src(['gulplearn/a.css','gulplearn/js/*.js','...']);

options类型：Object  //暂不太懂。。。
options.buffer (boolearn  //默认true
options.read (boolean  //默认true
options.base  (string

— gulp.dest(path [,options]);

path 类型 ： String or Array
跟src差不多， 

options 类型： Object  //看不太懂。。。
options.cwd (string //默认 process.cwd()
options.mode (string //默认0777 权限相关

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

name : String  // 任务名称 自取， default将是默认的任务
deps ：Array  //任务数组 再当前任务运行前完成
gulp.task('nameA',['taskA','taskB','...'], function(){
    // do something
    console.log('hello world');
});

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

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

glob 类型： String or Array  //同前面的src差不多
opts //没明白
tasks 类型：Array  //在文件变动后执行的一个多个任务。
var myWatch = gulp.watch('css/a.css', ['min','task']);
myWatch.on('change',function(e){
    console.log(e);
});

gulp.watch('js/*.js',function(e){
    console.log(e.path, e.type);
});
e.type : String 取值 added ,changed ,deleted //变动类型
e.path ：String //路径

安装各种插件

npm install gulp-file-include --save-dev  //文件包含
npm install gulp-rename --save-dev //重命名
gulp-autoprefixer  //css前缀
gulp-load-plugins  //批量加载插件
gulp-watch
gulp-header
gulp-footer
gulp-babel babel-preset-es2015  //es6转es5