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

gulp 安装笔记的更多相关文章

  1. Gulp安装笔记(转)已经测试过

    前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...

  2. Gulp安装笔记

    前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...

  3. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  4. gulp学习笔记1

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...

  5. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...

  6. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  7. MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记

    MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记 说明 以root账户登录Linux操作系统,注意:本文中的所有命令行前面的 #> 表示命令行提示符 ...

  8. 基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记

    基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记 飞翔的蜘蛛人 注1:本人新手,文章中不准确的地方,欢迎批评指正 注2:知识储备应达到Linux入门级水平 ...

  9. sublime 安装笔记

    sublime 安装笔记 下载地址 安装package control 根据版本复制相应的代码到console,运行 按要求重启几次后再按crtl+shift+p打开命令窗口 输入pcip即可开始安装 ...

随机推荐

  1. css重置reset.css

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, b ...

  2. mogodb监控脚本

    mongodb_server.py #! /bin/env python #-*- coding:utf8 -*- import sys import os from bson.timestamp i ...

  3. 2.C语言中的关键字

    1.auto 修饰局部变量,编译器默认所有局部变量都是用auto来修饰的,所以在程序中很少见到. 2.static 它作用可大了,除了可以修饰变量,还可以修饰函数,修饰变量,改变其作用域和生命周期,修 ...

  4. Windows Azure - Troubleshooting & Debugging: Role Recycling

    每年总会碰到几次Role Recycling,处理完记录下 :) 1. 和往常一样先排查系统日志,修复异常.> 没效果 :( 2. 排查Event Viewer中的Logs,没有发现比较奇怪Lo ...

  5. C++ MFC控制台输出调试信息

    1.#include <conio.h> 2.在需要开启控制台窗口的地方调用 AllocConsole();//注意检查返回值 3.在需要输出调试的时候调用_cprintf等函数 如_cp ...

  6. csuoj 1394: Virus Replication

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1394 1394: Virus Replication Time Limit: 1 Sec  Mem ...

  7. Mac终端用Sublime打开指定文件或文件夹

    首先你先把的sublime放到Application中,再确认您的Sublime的路径是否正确 1 创建别名: sudo ln -s "/Applications/Sublime\ Text ...

  8. kindEditor完整认识 PHP上调用并上传图片说明/////////////////////////////z

      最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html ...

  9. C语言堆和栈

    堆和栈的区别 一个由C/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2.堆区(heap ...

  10. 个人训练记录-赛码"bestcoder"杯中国大学生程序设计冠军赛

    A.Movie 题意是给n个线段,要求求出是否存在三个不相交的线段,是的话输出yes,否则输出no.根据贪心的想法,可以先找出右端点r'最小的线段,他是三条线段中最左的那条,再找出左端点l'最大的线段 ...