2017春 前端自动化(一)构建工具的搭建

 2017春 前端自动化(一)构建工具的搭建

引言：在当前项目开发中，为了减免人工重复的劳动；

为了更加自动化、智能化的开发项目，摸索了很久的前端自动化开发流程，娓娓道来、逐一而列……

 

 A:搭建 node 环境
当今互联网江湖，唯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成功。

 

为了后续gulp插件可以更好更快速的安装，我们可以事先安装cnpm,(ps:cnpm从国内下载，淘宝做的，速度快)
dos窗口下输入： npm install -g cnpm --registry=https://registry.npm.taobao.org  即可

 

B:gulp 自动化构建工具
gulp 官网    http://www.gulpjs.com.cn/   

先全局安装gulp 
dos窗口下输入：npm install --global gulp

后续在开发项目中的时候需要dos窗口输入（npm install gulp --save-dev）类似这样输入命令;以作为项目的开发依赖（devDependencies）。

这个时候基础环境有了，我们在自己喜欢的编辑器（非eclipse）里面导入自己的项目文件夹
之后，在当前项目，配置node环境

先生成packge.json文件 
在当前文件夹打开dos窗口，输入：npm (cnpm ) init 

 

回车
之后，回到项目页面，看见  package.json 显示出来了

 

接下来，当前项目，安装 gulp

 

 

 

 

 

 

cnpm install gulp  --save-dev 

 

然后，我们安装浏览器自动刷新插件：browser-sync   专门做浏览器自动刷新 

（ps:帮你自动 打开浏览器 ，并且 可以为你搭建一个web服务器，实时刷新。）
当前项目文件夹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");
});

 

 

至此，一个项目的，自动化基础环境，有了。我们可以在此里面，快速编写我们的代码，工具减少了很多冗余的流程。未完，待续……

 

多谢“田兄”一路指点……得以完善