1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g rimraf gulp
项目下新建package.json和gulpfile.js。
打开package.json添加 {} 花括号,保存。
2.gulp插件(每个项目都要安装一次)
cnpm install --save-dev gulp gulp-replace gulp-less gulp-minify-css browser-sync gulp-react gulp-babel babel-preset-es2015 babel-polyfill babel-preset-stage-0 gulp-webpack
- replace替换文字插件
- less编译less文件插件
- minify-css压缩css插件
- browser-sync自动重载浏览器插件
- react编译react插件
- babel编译ES插件
- babel-preset-es2015将ES6编译为ES5
- gulp-webpack编译模块化文件
- babel-preset-stage-0
- babel-polyfill垫片库
可能需要安装的babel转ES5插件:
cnpm install --save-dev babel-plugin-transform-es2015-duplicate-keys babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-block-scoped-functions babel-plugin-transform-es2015-modules-amd babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-es2015-object-super babel-plugin-transform-es2015-template-literals babel-plugin-check-es2015-constants
3.卸载方法
cmd指向gulp根目录
rimraf -rf node_modules
4.gulpfile.js实例
var gulp = require("gulp");
var replace = require("gulp-replace");
var browserSync = require("browser-sync");
var less = require("gulp-less");
var minCss = require('gulp-minify-css');
var babel = require('gulp-babel');
var webpack = require('gulp-webpack');
var react = require('gulp-react')
//路径存储变量
var srcPath = 'src/';
var distPath = 'dist/';
var notUgly = [ srcPath + 'js/*.js', "!" + srcPath + 'js/jquery.js'];
//替换文件内容
gulp.task('replace', function() {
return gulp.src(srcPath + '*.php')
//将src目录下所有php文件的123替换成321
.pipe(replace('123','321'))
.pipe(gulp.dest(distPath));
});
//编译ES6语法的react文件
gulp.task('reactify', function(){
return gulp.src(srcPath + 'js/*.jsx')
.pipe(react())
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest(distPath + 'js/'))
.pipe(webpack({
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
output:{
filename:"ui.js",
}
}))
.pipe(gulp.dest(distPath + 'js/'))
.pipe(browserSync.reload({
stream: true
}))
});
//编译ES6
gulp.task('es6', function(){
return gulp.src(srcPath + 'js/**/*.es6')
//匹配js文件夹下所有ES6文件(包括子文件夹)
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest(srcPath + 'es6/'))
.pipe(webpack({
output:{
filename:"es6.js",
}
}))
.pipe(gulp.dest(distPath + 'js/'))
.pipe(browserSync.reload({
stream: true
}))
});
//编译压缩less文件
gulp.task('less', function(){
return gulp.src(srcPath + 'less/*.less')
.pipe(less())
.pipe(minCss)
.pipe(gulp.dest(distPath + 'css'))
.pipe(browserSync.reload({
stream: true
}))
});
//导出html并重载浏览器
gulp.task('html', function(){
return gulp.src(srcPath + '*.php')
.pipe(gulp.dest(distPath))
.pipe(browserSync.reload({
stream: true
}))
});
//自动重载浏览器,本地开启了服务器就修改端口号,路径修改到生产环境
gulp.task('browserSync', function() {
browserSync({
proxy: "local.dev",
proxy: "localhost:8080",
proxy: "localhost/wechat/dist",
})
});
//监听各文件,改动后执行后面的[任务],完成任务后执行browserSync任务
gulp.task('watch', ['browserSync'],function(){
gulp.watch(srcPath + 'js/*.jsx', ['reactify']);
gulp.watch(srcPath + 'js/**/*.es6', ['es6']);
gulp.watch(srcPath + 'less/*.less', ['less']);
gulp.watch(srcPath + '*.php', ['html']);
});
gulp.task("default", ['watch'], function(){});
cmd指向gulpfile.js的文件夹,然后gulp watch 开始监听。
5.gulp.js文件使用es6
用编辑器保存一个.babelrc文件(没有名字只有后缀的文件),粘贴配置信息并保存。
{
"presets": ["es2015", "stage-0"]
}
文件开头加上
'use strict'
import "babel-polyfill";
gulp.js重命名为gulp.babel.js
这样就可以在gulp中使用es6