2017春 前端自动化(一)构建工具的搭建
引言:在当前项目开发中,为了减免人工重复的劳动;
为了更加自动化、智能化的开发项目,摸索了很久的前端自动化开发流程,娓娓道来、逐一而列……
A:搭建 node 环境 当今互联网江湖,唯BAT三足鼎立,取其中间,跟着A涨点姿势; 淘宝的利好大事,淘宝 NPM 镜像,官网地址
点进去
选择
Node.js 镜像
点进去 经过多次测试,我们选择稳定版本
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"); });
至此,一个项目的,自动化基础环境,有了。我们可以在此里面,快速编写我们的代码,工具减少了很多冗余的流程。未完,待续……
多谢“田兄”一路指点……得以完善