目录
浏览器同步:
打包js:
整理sass:
REACT:
观察者:
REACT子组件:
主组件:
主页
//===========浏览器同步==============================
//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==================================
//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================================
//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=============================
//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"]);
var React = require("react");
var ReactDOM = require("react-dom");
class Top extends React.Component{
render(){
return(
这是子组件
)
}
}
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(
这是主组件d
)
}
}
ReactDOM.render(,document.getElementById("main"));
首页
标题1
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"]);