目录
浏览器同步：
//===========浏览器同步==============================
//npm i --save--dev browser-sync
//浏览器同步
var browserSync = require("browser-sync").create();
gulp.task("default",["style","script"],function(){
console.log("SUCCESS");
//创建浏览器首页
browserSync.init({
server:{
baseDir:"./"
}
})
//添加观察者，页面内容改变就更新浏览器
gulp.watch("./index.html",["default"]);
})
//==================================================打包js：
//===========打包js==================================
//npm i --save--dev gulp-concat gulp-jshint jshint gulp-uglify
//gulp打包插件
var concat = require("gulp-concat");
//验证js
var hint = require("gulp-jshint");
//js压缩加密
var uglify = require("gulp-uglify");
gulp.task("script",function(){
console.log("js整理");
//npm i --save--dev gulp-concat//打包
gulp.src(["./script/**/*.js"])
// npm install --save--dev gulp-jshint//验证
.pipe(hint())//假如验证
.pipe(hint.reporter("default"))//显示错误
.pipe(hint.reporter("fail"))//有错误停止整合
.pipe(concat("index.min.js"))
//npm install --save-dev gulp-uglify
.pipe(uglify())//打包之后在加密
.pipe(gulp.dest("./www/js"))
.pipe(browserSync.stream())
})
//==================================================整理sass：
//==========整理sass================================
//npm i --save--dev gulp-sass gulp-minify-css
var sass = require("gulp-sass");
var minify = require("gulp-minify-css");
gulp.task("style",function(){
console.log("样式整理")
return gulp.src("./style/**/*.scss")
.pipe(sass())
.pipe(concat("index.min.css"))
.pipe(minify())
.pipe(gulp.dest("./www/css"))
.pipe(browserSync.stream())
})
//==================================================
REACT:
//================REACT=============================
//npm i --save--dev gulp gulp-concat react react-dom
// gulp-webpack jsx-loader
//
var webpack = require("gulp-webpack")
var webpackConfig = {
output:{
filename: 'index.js'
},
devtool: 'inline-source-map',
module:{
loaders:[
{test: /\.jsx$/, loader: 'jsx-loader'}
]
},
resolve:{
extensions:['','.js','.jsx']
}
}
gulp.task('jsx', function(){
gulp.src('./jsx/index.jsx')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./www/js'))
.pipe(browserSync.stream());
})
//==================================================观察者：
//添加观察者，页面内容改变就更新浏览器
gulp.watch("./index.html",["default"]);
gulp.watch("./jsx/component/**/*.jsx",["jsx"]);
gulp.watch("./jsx/page/**/*.jsx",["jsx"]);
gulp.watch("./jsx/index.jsx",["jsx"]);
gulp.watch("./script/**/*.js",["script"]);
gulp.watch("./style/**/*.scss",["style"]);REACT子组件：
var React = require("react");
var ReactDOM = require("react-dom");
class Top extends React.Component{
render(){
return(
<h1>这是子组件</h1>
)
}
}
module.exports = Top主组件：
- 只能有一个根标签
- 导入子组件，开头必须大写
var React = require("react");
var ReactDOM = require("react-dom");
//导入子组件
var Top = require("./component/Top.jsx");
class Main extends React.Component{
render(){
return(
<div>
<div>这是主组件d</div>
<Top/>
</div>
)
}
}
ReactDOM.render(<Main/>,document.getElementById("main"));主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="www/css/index.min.css">
</head>
<body>
<h1>标题1</h1>
<div id="main"></div>
<script src="www/js/index.min.js"></script>
<script src="www/js/index.js"></script>
</body>
</html>GULP
1：发布项目
2：打包项目
3：验证 js/css
4：编译
注解：编译之前的JS问价只能叫做tx，编译之后的叫做js
步骤：
$npm init //新项目
$npm install glup-cli -g 全局指令安装
$npm install gulp --save-dev 别人不需要下载你的glup插件
3.添加gulpfile.js 文件
作用：在文件内写方法，压缩，验证，打包，加密js/css
var gulp = require("glup");
gulp.task("default",function(){
//任务执行语句
console.log("这是主方法");
});
然后用$gulp指令启动方法
刚才的主方法是gulp的总方法，像java中的main方法，其他方法必须放在他的任务调度数组中，才会被执行到，不然就不能调用。
现在写一个普通方法，然后在主方法的数组中调用
gulp.task("default",["compresJs"],function(){
console.log("主方法，在执行主方法之前调用compresJs方法");
})
gulp.task("compresJs",["startCompreJs"],function(){
console.log("执行打包Js的方法");
})
然后在执行打包语句以前我们还可以调用一个开始显示方法
gulp.task("startCompreJs",function(){
console.log("开始打包方法");
})
这样我们就不难看出，每个方法有一个前置执行方法数组，最终把调用的职责交给default方法
然后其他的方法就是在其中被间接调用，或直接引用。总之default是最后面执行的方法，它负责启动其他的所有方法。
压缩JS
测试前导入几个js文件，看是否能整合成一个文件。
1）导入插件
$npm install gulp-concat --save-dev
2）下载完成，在gulpfile.js文件中导入该插件。
var concat = require("gulp-concat");
3）gulp.task("compresJs",function(){
gulp.src(["./script/**/*.js"])
//该文件夹下所有的.js文件
.pipe(concat("index.min.js"))
//把所有的.js文件合并到该文件下,行业命名规范
.pipe(gulp.dest("./dest"))
//把整合过的文件放在同级下一个dest文件夹下
})
4）打包$gulp
这样打包不管对错都会打包到一起，这样肯定不行嘛。。。
于是，在打包前先进行验证，假如有错误就终止该次打包行为。
验证插件安装：
1）下载插件
$npm install --save-dev jshint gulp-jshint
2）引用
var hint = require("gulp-jshint");
工程化项目
收集之后进行验证JS的正确性
gulp.task("compresJs",function(){
gulp.src(["./script/**/*.js"])
.pipe(hint()) //加入验证
.pipe(hint.reporter("default")) //显示错误
.pipe(hint.reporter("fail") //有错误就停止合并
.pipe(concat("index.min.js"))
.pipe(gulp.dest("./dest"))
})
最后打包：$gulp
打包完成以后我们的代码就合并成了一个，并且验证过，所有的代码都是可以跑的
但是我们还需要把我们的代码压缩加密下
5）压缩，加密（只有10句以上的代码才有加密效果）
a)装插件：$npm install --save-dev gulp-uglify
b)引用包：var uglify = require("gulp-uglify");
gulp.task("compresJs",function(){
gulp.src(["./script/**/*.js"])
.pipe(hint())
.pipe(hint.reporter("default"))
.pipe(hint.reporter("fail")
.pipe(uglify()) //压缩
.pipe(concat("index.min.js"))
.pipe(gulp.dest("./dest"))
})
管道就像责任链模式
//==========================================
接下来压缩打包css
新建文件夹style，新建index.scss
装sublime 支持SCSS的插件，sass
$bgc:ff0000 变量
body{
background:#bgc-7;把颜色简单一些
//sass语法和less是一样的
}
p{
color:$bgc;
}
使用整理css 的插件
1)下载
npm install glup-sass --save-dev;
var sass = require("gulp-sass");
gulp.task("compresCss",function(){
console.log("这是css的打包压缩方法")
return gulp.src("./style/**/*.js")
.pipe(sass())
.pipe(concat("index.min.css"))
.pipe(gulp.dest("./dest))
.pipe(browserSync())
行业规定，压缩过的文件一律都加min
})
验证css
$npm install --save-dev gulp-minify-css
var minify = require("gulp-minify-css");
gulp.task("compresCss",function(){
console.log("这是css的打包压缩方法")
return gulp.src("./style/**/*.js")
.pipe(sass())
.pipe(minify()); //在整合所有的CSS之前就先验证
.pipe(concat("index.min.css"))
.pipe(gulp.dest("./dest))
.pipe(browserSync())
})
建一个入口文件（html）导一个css，导一个js，把所有的JS,CSS都写散的，然后所有的都整合到一个文件之中。
导入浏览器的包
$npm install --save-dev browser-sync
var browerSync = require("browser-sync").create();
gulp.task("default",["compresJs","compresCss"],function(){
browserSync.init({
server:{
baseDir:"./"
}
})
})
加入观察者
gulp.watch("./style/**/*.css",["compresCss"]);
观察这个文件，只要这个对象改变了，后面的观察方法立刻执行
gulp.watch("./script/**/*.js",["compresJs"])
作业 DEMO
2，webpack框架与gulp一样能把几个文件压缩成一个
var gulp = require("gulp");
//合并js的插件
var concat = require("gulp-concat");
//导入验证js的插件
var hint = require("gulp-jshint")
//导入压缩加密js的插件
var uglify = require("gulp-uglify");
//支持sass的插件
var sass = require("gulp-sass");
//验证css
var minify = require("gulp-minify-css");
//导入浏览器插件
var browserSync = require("browser-sync").create();
gulp.task("default",["compresJs","compresCss"],function(){
// console.log("this is default ");
// 浏览器
browserSync.init({
server:{
baseDir:"./"
}
})
})
//打包js的方法
gulp.task("compresJs",function(){
// console.log("打包js");
gulp.src(["./js/**/*.js"])
.pipe(hint())//加入验证
.pipe(hint.reporter("default"))//显示错误
.pipe(hint.reporter("fail")) //有错误就停止合并
.pipe(uglify())//压缩,加密
.pipe(concat("index.min.js"))
.pipe(gulp.dest("./dest"))
.pipe(browserSync.stream());//监察者
})
//打包css（sass）
gulp.task("compresCss",function(){
// console.log("打包css")
return gulp.src(["./style/**/*.scss"])
.pipe(sass())
.pipe(minify()) //在整合所有的CSS之前就先验证
.pipe(concat("index.min.css"))
.pipe(gulp.dest("./dest"))
.pipe(browserSync.stream());//监察者
})
gulp.watch("./js/**/*.js",["compresJs"]);
gulp.watch("./style/**/*.scss",["compresCss"]);