gulp 安装笔记

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