2017春 前端自动化(一)构建工具的搭建
2017春 前端自动化(一)构建工具的搭建
引言:在当前项目开发中,为了减免人工重复的劳动;
为了更加自动化、智能化的开发项目,摸索了很久的前端自动化开发流程,娓娓道来、逐一而列……
A:搭建 node 环境
当今互联网江湖,唯BAT三足鼎立,取其中间,跟着A涨点姿势;
淘宝的利好大事,淘宝 NPM 镜像,官网地址 http://npm.taobao.org/
当今互联网江湖,唯BAT三足鼎立,取其中间,跟着A涨点姿势;
淘宝的利好大事,淘宝 NPM 镜像,官网地址 http://npm.taobao.org/
点进去
选择
Node.js 镜像 http://npm.taobao.org/mirrors/node
点进去
经过多次测试,我们选择稳定版本
Mirror index of https://nodejs.org/dist/v6.2.0/
下载:node-v6.2.0-x64.msi 17-May-2016 19:55 12263424(11.7MB)链接
进行安装即可。
接下来,dos窗口下输入:node -v
弹出
下载:node-v6.2.0-x64.msi 17-May-2016 19:55 12263424(11.7MB)链接
进行安装即可。
接下来,dos窗口下输入:node -v
弹出
![](https://images2015.cnblogs.com/blog/777572/201702/777572-20170213112107191-1849184555.png)
则,安装node成功。
为了后续gulp插件可以更好更快速的安装,我们可以事先安装cnpm,(ps:cnpm从国内下载,淘宝做的,速度快)
dos窗口下输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 即可
dos窗口下输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 即可
B:gulp 自动化构建工具
gulp 官网 http://www.gulpjs.com.cn/
gulp 官网 http://www.gulpjs.com.cn/
先全局安装gulp
dos窗口下输入:npm install --global gulp
后续在开发项目中的时候需要dos窗口输入(npm install gulp --save-dev)类似这样输入命令;以作为项目的开发依赖(devDependencies)。
这个时候基础环境有了,我们在自己喜欢的编辑器(非eclipse)里面导入自己的项目文件夹
之后,在当前项目,配置node环境
之后,在当前项目,配置node环境
先生成packge.json文件
在当前文件夹打开dos窗口,输入:npm (cnpm ) init
在当前文件夹打开dos窗口,输入:npm (cnpm ) init
![](https://images2015.cnblogs.com/blog/777572/201702/777572-20170213112139004-264639852.png)
回车
之后,回到项目页面,看见 package.json 显示出来了
之后,回到项目页面,看见 package.json 显示出来了
![](https://images2015.cnblogs.com/blog/777572/201702/777572-20170213112203504-1295811500.png)
接下来,当前项目,安装 gulp
cnpm install gulp --save-dev
然后,我们安装浏览器自动刷新插件:browser-sync 专门做浏览器自动刷新
(ps:帮你自动 打开浏览器 ,并且 可以为你搭建一个web服务器,实时刷新。)
当前项目文件夹dos窗口下输入:cnpm install browser-sync --save-dev
当前项目文件夹dos窗口下输入:cnpm install browser-sync --save-dev
右键,建立gulpfile.js文件
开始写任务了
开始写任务了
var gulp=require("gulp");
var browserSync=require("browser-sync");
gulp.task("server",function(){
browserSync.init({
"server":"./",
"port":"8282",
"files":[
"./**/.*html",
"./styles/*.css",
"./script/*.js"
]
});
});
gulp.task("default",function(){
gulp.start("server");
});
gulp.task("server",function(){
browserSync.init({
"server":"./",
"port":"8282",
"files":[
"./**/.*html",
"./styles/*.css",
"./script/*.js"
]
});
});
gulp.task("default",function(){
gulp.start("server");
});
至此,一个项目的,自动化基础环境,有了。我们可以在此里面,快速编写我们的代码,工具减少了很多冗余的流程。未完,待续……
多谢“田兄”一路指点……得以完善
作为工作备忘录而已!