写在前面
个人学习记录，配置有可能有打错的地方，还请不吝赐教。
安装gulp
首先全局安装：
$npm install gulp -g
在指定的目录下安装gulp并存为开发依赖
$npm install gulp --save-dev
插播一段说明：--save 与--save-dev
--save是存为运行依赖（启动应用所必须）
--save-dev是存为开发依赖（修改源码所必须）
gulp初始化
在目录中创建一个gulpfile.js的文件保存gulp的配置
配置说明：
var gulp=require('gulp') //获取gulp模块
gulp.task('default',function(){
//something
});
//配置默认事件
有关gulp事件的说明
gulp.src('src/**/*.js')
//选择当前src目录中（包括子文件夹）所有的js文件
（'src/*.js'）这种不包括子文件夹
.pipe(some require) //用某模块来处理这些文件
.pipe(gulp.dest('publice/js'))//输出处理后的文件
gulp.watch('src/*.js',['//some task'])//watch监视指定目录，若发生改变调用task 常用于自动编译或者刷新
gulp也可以配置异步调用，或者声明promise对象不过个人感觉一般用不到，如有需求可以查看文档：gulp中文api
gulp配置示例
首先是一个也许会常用的基于gulp的插件名称和说明
- 自动加上 css3 前缀LessPluginAutoPrefix = require("less-plugin-autoprefix")
应该有gulp 版本 - Browsersync 同时进行浏览器显示效果的测试工具
- gulp-concat js文件拼接 npm install gulp-concat --save-dev
- gulp-uglify js文件压缩 npm install gulp-uglify --save-dev
- gulp-clean-css css文件压缩 npm install gulp-clean-css --save-dev
- gulp-changed 只编译修过过的文件 npm install gulp-changed --save-dev
- gulp-babel es6转es5 react jsx 转换 npm install gulp-babel babel-preset-es2015 --save-dev
- gulp-plumber 错误详细信息 npm install gulp-plumber --save-dev
- gulp-util 杂用组件库 npm install gulp-util --save-dev
- gulp-sourcemaps 生成依赖地图 用来编译复杂的相互引用的less(比如bootstrap)，js(比如各种node模块)等文件) npm install gulp-sourcemaps --save-dev
配置Less编译和压缩
Less编译
安装 gulp-less
$ npm install gulp-less --save-dev
配置less自动编译
var gulp=require('gulp');
var less=require('gulp-less');
gulp.task('less',function(){
return gulp.src('less/*.less')
.pipe(less()) //READE.ME文件中有例子，但其中的依赖项我暂时不知道干嘛的
.pipe(gulp.dest('publice/css/'));
});
gulp.task('lessWatch',function(){
gulp.watch('less/*.less',['less']);// 当less目录下的文件发生变化时运行less编译方法（注意不支持创建）
});
gulp.task('default',['lessWatch'])//默认启动less监视事件
以上就是最简单的基于gulp-less的less自动编译配置
下面我们来看看编译的同时压缩
基于gulp-clean-css
安装gulp-clean-css
$ npm install gulp-clean-css
在上面的配置文件基础上加入gulp-clean-css
单独使用可以参考READEME文档
var gulp=require('gulp');
var less=require('gulp-less');
var cleanCSS=require('gulp-clean-css');
gulp.task('less',function(){
return gulp.src('Less/*.less')
.pipe(less()) //READE.ME文件中有例子，但其中的依赖项我暂时不知道干嘛的
.pipe(cleanCSS()) //添加这句话
.pipe(gulp.dest('Publice/css/'));
});
gulp.task('lessWatch',function(){
gulp.watch('Less/*.less',['less']);// 当less目录下的文件发生变化时运行less编译方法（注意不支持创建）
});
gulp.task('default',['lessWatch'])//默认启动less监视事件
gulp基本配置如此
下面附上一个可以编译复杂引用的less，同时报错可以输出错误信息的gulp配置示例
var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //需要先确保安装gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //生成依赖地图
var plumber = require('gulp-plumber'); //错误管理
var gutil = require('gulp-util'); //实际的提醒
function errHandler( e ){
gutil.log(e.toString());
} //创建一个显示错误信息的函数
gulp.task('less', function() {
gulp.src('Less/*.less')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(plumber( {errorHandler: errHandler}))
.pipe(less())
.pipe(cleanCSS()) //链式操作 先编译再压缩
.pipe(sourcemaps.write('mpas'))
.pipe(gulp.dest('Publice/css'));
});
gulp.task('watch',function(){
gulp.watch('Less/*.less', ['less']);
});
gulp.task('default', ['watch']);
ES6转ES5并压缩混淆的配置
原理和逻辑与LESS并无太大不同
首先是安装
$ npm install gulp-babel babel-preset-es2015 --save-dev
然后是配置
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps'); //生成依赖地图
var plumber = require('gulp-plumber'); //错误管理
var gutil = require('gulp-util'); //实际的提醒
var babel=require('gulp-babel'); //es6转es5
var uglify = require('gulp-uglify'); //js压缩
function errHandler( e ){
gutil.log(e.toString());
} //错误提示函数
gulp.task('es5change',function(){
gulp.src('es6/*.js')
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(plumber({errorHandler:errHandler}))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('Publice/js'));
});
gulp.task('watch',function(){
gulp.watch('es6/*.js', ['es5change']);
});
gulp.task('default', ['watch']);
最后附上Less和ES6转ES5的完整配置项
var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //需要先确保安装gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //生成依赖地图
var plumber = require('gulp-plumber'); //错误管理
var gutil = require('gulp-util'); //实际的提醒
var babel=require('gulp-babel'); //es6转es5
var uglify = require('gulp-uglify'); //js压缩
function errHandler( e ){
gutil.log(e.toString());
}
gulp.task('es5change',function(){
gulp.src('es6/*.js')
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(plumber({errorHandler:errHandler}))
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('Publice/js'));
});
gulp.task('less', function() {
"use strict";
gulp.src('Less/*.less')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(plumber( {errorHandler: errHandler}))
.pipe(less())
.pipe(cleanCSS()) //链式操作 先编译再压缩
.pipe(sourcemaps.write('mpas'))
.pipe(gulp.dest('Publice/css'));
});
gulp.task('watch',function(){
gulp.watch('Less/*.less', ['less']);
gulp.watch('es6/*.js', ['es5change']);
});
gulp.task('default', ['watch']);
