gulp前端工程化工具文件的压缩，打包编译。各类语法的转义。 ... 说明当前环境的基本配置,当前环境的依赖,当前环境

前端工程化工具

gulp

一套基本流程，直接完成！

1.
npm install --global gulp@3.9.1 全局一个
npm install --save-dev gulp@3.9.1 开发路径一个
还可以多个一起下载， 只需空格加下载文件 ，文件加@后面可以选择下载的版本
检查是否安装成功 gulp -v
2.
npm init -y 配置文件生成

gulp插件

1.服务器插件：gulp-connect 安装: npm install --save-dev gulp-connect 常见用法：

//初始化gulp-connect指令;
gulp.task("connect",()=>{
connect.server({
root: 'dev',
// 自动刷新功能
livereload: true,
});
})
// 在html指令之中配合 自动刷新功能;
gulp.task("html",()=>{
return gulp.src(["./src/*.html"]).pipe(gulp.dest("./dev"))
// 配合gulp-connect 自动刷新功能的配置项;
.pipe(connect.reload());
})

常见依赖插件：下载例：npm install --save-dev gulp-connect 具体以及使用详细见：npmjs.com

"devDependencies": {
    "gulp": "^3.9.1",
    npm install --global gulp@3.9.1
    npm install --save-dev gulp@3.9.1 
    
    "gulp-clean-css": "^4.2.0",打包css
    npm install gulp-clean-css --save-dev
    
    "gulp-concat": "^2.6.1",多分枝js，打包进一个js文件
    npm install --save-dev gulp-concat
    
    "gulp-connect": "^5.7.0", 服务器
    npm install --save-dev gulp-connect
    
    "gulp-imagemin": "^5.0.3",图片
    npm install --save-dev gulp-imagemin
    
    "gulp-sass": "^4.0.2",和最底下的是一套工具、、编写scss
    npm install node-sass gulp-sass --save-dev
    
    "gulp-uglify": "^3.0.2",js打包工具
    npm install --save-dev gulp-uglify
    
    "node-sass": "^4.12.0"
    npm install node-sass gulp-sass --save-dev
}

小提示：去除文件夹目录结构保留文件

https://sunxboy.iteye.com/blog/2177530

前端工程化

grunt 被淘汰
gulp

文件的压缩，打包编译。
各类语法的转义。
图片压缩
测试服务器
服务器代理
... 工程化的核心在于：各司其职互不打扰

webpack ####nodejs搭建初始环境

npm init 会初始化 package.json

package.json script 指令 :

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}

说明当前环境的基本配置,当前环境的依赖,当前环境的驱动指令。我们通过 npm run 指令的形式去驱动一个复杂的指令可以使我们通过简单的指令完成复杂的功能;

npm run xxx

安装gulp

npm install --global gulp@3.9.1
npm install --save-dev gulp@3.9.1

如何检测安装成功 ?

gulp -v
CLI version 3.9.1
Local version 3.9.1

使用gulp

创建一个 gulpfile.js 文件;
task() ; 添加指令的方法;

工程化的划分

dev 开发阶段我们的目标在于快速呈现效果，方便排错开发...
build 打包我们的目标在于最简化最优质的兼容性良好的代码...

gulp插件

gulp-connect gulp的服务器插件

//初始化gulp-connect指令;
gulp.task("connect",()=>{
connect.server({
root: 'dev',
// 自动刷新功能
livereload: true,
});
})
// 在html指令之中配合 自动刷新功能;
gulp.task("html",()=>{
return gulp.src(["./src/*.html"]).pipe(gulp.dest("./dev"))
// 配合gulp-connect 自动刷新功能的配置项;
.pipe(connect.reload());
})

gulp-babel 新语法(es6 , ts , jsx ....)编译成es5。

dev分支配置

把一组js合并成一个js, 一组js是以文件夹为单位进行配置的。

gulp-concat (这个插件其实性能还挺好的)

配置 gulp-concat 因为模块会不断增加所以我们扩展配置更多的js模块，所以我们提取出了一个配置的json用来方便去维护及更新 |--project |--conf index.js

scripts : {
"index" : {
src : "./src/scripts/index/"
},
"login" : {
src : "./src/scripts/login/"
}
}

我们继续封装方法，为了方便的实现代码的合并

指令task 。为了根据 scripts 这个json方便的绑定指令所以我们封装了方法 mergeMyScripts去进行指令解析。

function mergeMyScripts(json){
for(let attr in json ){
gulp.task("scripts-"+attr,()=>{
return gulp.src([scripts[attr].src+"*.js"])
.pipe(concat(attr + ".js"))
.pipe(gulp.dest("./dev/scripts"))
.pipe(connect.reload())
})
}
}

watch 部分。为了根据不同文件的更新从而实现局部js的更新我们分别对不同的js进行了监听。

function watchScripts(json){
for(let attr in json){
gulp.watch(json[attr].src+"*.js",["scripts-"+attr]);
}
}

当我启动项目的时候,服务器开启,监听开启。让我们的文件有一个初始的结构。我们需要建立一个scripts指令集合全部的script指令建立初始结构

let scriptsTaskArray = [];
// 在mergeMyScripts将新指令全部放入到scriptsTaskArray;
gulp.task("scripts",scriptsTaskArray);
gulp.task("default",["html","scripts","connect","watch"]);