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
gulp 安装笔记的更多相关文章
- Gulp安装笔记(转)已经测试过
前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...
- Gulp安装笔记
前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...
- gulp学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
- gulp学习笔记1
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...
- gulp学习笔记2
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- 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操作系统,注意:本文中的所有命令行前面的 #> 表示命令行提示符 ...
- 基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记
基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记 飞翔的蜘蛛人 注1:本人新手,文章中不准确的地方,欢迎批评指正 注2:知识储备应达到Linux入门级水平 ...
- sublime 安装笔记
sublime 安装笔记 下载地址 安装package control 根据版本复制相应的代码到console,运行 按要求重启几次后再按crtl+shift+p打开命令窗口 输入pcip即可开始安装 ...
随机推荐
- android获取textview的行数
最近项目需求,需要获取Textview的行数,通过行数与TextView的maxLines进行比较来确定是否显示TextView下方的展开按钮是否显示,废话少说直接上代码,mTextView.getL ...
- 运行maven项目
- magento目录结构说明,Magento文件夹结构说明,Magento folder structure
/app – 程序根目录 /app/etc – 全局配置文件目录 /app/code – 所有模块安装其模型和控制器的目录 /app/code/core – 核心代码或经过认证 ...
- deepin linux 安装 mysql
一:安装mysql 打开deepin terminal: 在此过程中会提示输入两次密码,就是输入 root 账号密码,两次输入密码一样就可以了.然后一路Y安装成功. 一旦安装成功,MySql服务器会自 ...
- nodejs学习心得
其实这次软件工程的微信公众号大作业对我来说是一个很大的挑战? 为什么这么说呢?因为我的基础太差了,实话说,到现在,c语音,java这些我恐怕就只能打出个hello world 自己太懒了,不想去学.这 ...
- nyist 78 圈水池
http://acm.nyist.net/JudgeOnline/problem.php?pid=78 圈水池 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有一个 ...
- C语言堆和栈
堆和栈的区别 一个由C/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2.堆区(heap ...
- Timer的故事----Jdk源码解读
咱们今天也来说说定时器Timer Timer是什么? Timer n. [电子] 定时器:计时器:计时员 从翻译来看,我们可以知道Timer的本意是,定时定点. 而JDK中Timer类也的确是这个本 ...
- ajaxfileupload 传参数
引用:http://www.cnblogs.com/lyeo/archive/2012/05/11/2496261.html 直接上代码: var data = { name: 'my name', ...
- .net动态类型在处理json数据方面的应用
我们在.net中处理json数据时,经常需要定义相应的类.比如json数据:{ "name" : "hello", "age" : 18 } ...