gulp的配置以及使用

1. 全局安裝 gulp：npm install --global gulp
2.做爲項目的開發依賴（devDependencies）安裝：npm install --save-dev gulp
3.在項目根目錄下建立一個名爲 gulpfile.js 的文件:
var gulp = require('gulp');

gulp.task('default', function() {
// 將你的默認的任務代碼放在這
});
4.運行 gulp：gulp
5.建立package.json:npm init

js: gulp+babel(es6==>es5)
1.將es6轉化爲es5:cnpm install --save-dev gulp-babel babel-preset-es2015
2.const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
return gulp.src('es6/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('build'));
});

css: gulp + less=>css + px=>rem + 加前綴 + 壓縮css（兼容到ie8）
1.less=>css:npm install gulp-less
2.px=>rem:npm install --save-dev gulp-postcss postcss-px2rem
3.加前綴:cnpm install gulp-autoprefixer --save-dev
4.壓縮css:npm install gulp-clean-css
5.var less = require('gulp-less');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');
var processors = [px2rem({remUnit: 75})];
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-clean-css');
6.
gulp.task('less', function () {
// before. 找到 less 文件
return gulp.src('./assets/styles/*.less')
/*1.把less轉爲css*/
.pipe(less())
// 2. 編譯爲px==>rem
.pipe(postcss(processors))
//3.加前綴
.pipe(autoprefixer({
browsers:["iOS >= 8","Android > 4.4"],
cascade: true, //是否美化屬性值 默認：true 像這樣：
remove:true //是否去掉沒必要要的前綴 默認：true
}))
//兼容到ie8（壓縮css）
.pipe(cssmin({
compatibility: 'ie8',
keepSpecialComments: '*'
//保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
}))
// 3. 另存文件
.pipe(gulp.dest('./assets/css'))
});

轉換less和js：
gulp.task('default', ['less', 'js'])

監聽less和js並進行轉換：
gulp.task('watch',function(){
gulp.watch('./assets/styles/*.less',['less']);
gulp.watch('./assets/lib/*.js',['js']);
})