快速搭建好一个项目，你必须掌握这两步

随着node.js的迅猛发展,前端开发已经脱离了刀耕火种,进入蒸汽机时代。

前端自动化

实现前端自动化，到底有什么好处了？从我工作到现在，时间虽然不长，但是我已经深深体会到了他的优势。

一句话：自动化。他明显提高了我们开发人员的效率和团队协作的效率，让开发者能真正地专注于写代码。

为什么这么说？对于需要反复重复的任务，例如压缩、编译、单元测试、监测编译错误等，自动化工具可以减轻你的劳动，简化你的工作。当你正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。下面我就结合自己的工作说说我是如何搭建前端自动化开发环境的。

一、首先介绍一些基于node.js的前端自动化开发工具

node.js && npm

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

最简单的理解：

node.js又提供了一个javascript的运行环境,以前,javascript代码可以在浏览器中运行,现在,它可以在node.js所搭建的运行环境中运行了。

浏览器并不是一个理想的代码运行环境,浏览器在给javascript扩展API的时候,基于安全的考虑,很多功能都不能做。比如操作文件,随意的处理网络请求。所以,在以前,javascript相对于python,ruby 是一门不完善的语言。

在node.js这个运行环境中,并没有这样那样的限制,在这里,javascript成功变成了python,ruby,变成了一门真正的语言。

顺便说一句，学计算机，并且以后还打算要深入学习的，那么你的英语阅读水平也要慢慢提上来，原因我不说你也知道，如果有人和你说英语一点也不重要，那我只想说那绝对是骗人的。好了，我们言归正传。

windows下 node.js 的安装很简单,访问node.js官网,下载安装包,默认安装就好.

打开控制台测试是否安装成功，你也可以下载git，在git上面进行测试。

node -v

出现对应的版本号代表安装成功，接下来安装npm。

npm 是node.js的包管理工具, node.js以模块的方式组织代码,允许任何人提交一个模块,来扩展javascript, npm用来管理这些模块。

npm -v
npm install -g bower

因为 npm 的服务器在国外，会比较慢，你可以先安装 cnpm ，再用 cnpm 来进行项目依赖以及构建工具的安装，这样会稍微快一些。

npm install -g cnpm

如果还有的包安装不上，复制以下代码（ –registry=http://registry.npm.taobao.org）替换 x 来安装那些安装不上的包。

npm install x

bower—项目依赖的前端包管理软件

npm install -g bower

包管理工具,把项目中所依赖的文件保存在bower.json中，只需分享给别人bower.json即可

bower install

寻找bower.json文件把依赖项全部安装

bower install 在bower官网注册的库 --save

安装一个库，把库作为依赖项写入bower.json

bower install 网址 --save

bower install github短语 --save

bower 依赖git 把git命令添加到环境变量的方法: 在c盘中搜索 git.exe 找到它所处的位置,添加到环境变量

grunt && gulp 把一些手动的工具自动化

npm install -g gulp

注意，mac os 系统、部分Linux系统中，在这句话的前面加上“sudo ”指令。

 sudo npm install -g gulp

然后，在开发项目上，安装项目依赖（devDependencies）

npm install --save-dev gulp

继续，在项目的根目录下创建一个名为：gulpfile.js的文件，用来配置gulp的相关task:

 touch gulpfile.js

请打开gulpfile.js，输入以下内容：

这个gulpfile.js的内容就是目前我们搭建起来的雏形，有常用到的插件，如何压缩js、css，以及监听文件变化，实时刷新浏览器等等。

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),//压缩javascript代码
    concat = require('gulp-concat'),//合并多个文件的代码到一个文件中
    cleanCSS = require('gulp-clean-css'),//压缩css文件
    livereload = require('gulp-livereload'),//监听文件发生变化时，浏览器自动刷新页面
    babel = require('gulp-babel'),//将ES6（下一代JavaScript规范，添加了一些新的特性和语法）转换成ES5
    plumber = require('gulp-plumber'),//可以阻止 gulp 插件发生错误导致进程退出并输出错误日志
    less = require('gulp-less'),//将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息
    eslint = require('gulp-eslint'),//javascript语法错误检查
    htmlhint = require('gulp-htmlhint'),//压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作
    browserSync = require('browser-sync')//能让浏览器实时、快速响应您的文件(html、js、css、sass、less等等)的更改,BrowserSync支持多终端(PC、ipad、iphone、android等等)设备同时调试。

var bs = browserSync.create()

//压缩js
gulp.task('compress',function(){
    return gulp.src(['js/servers/**/*.js', 'js/directives/*.js', 'js/controllers/**/*.js', 'js/filter.js'])
        .pipe(plumber())
        .pipe(babel())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(livereload())
})

//1、*.js ：*号匹配当前目录任意文件，所以这里的＊js匹配当前目录下所有js文件。
//2、**/*.js:匹配当前目录及其子目录的所有js文件。

//压缩CSS
gulp.task('less',function(){
    gulp.src('css/*.less')
        .pipe(less())
        .pipe(concat('all.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(bs.reload({stream: true}))

})

gulp.task('bs', function(){
    bs.init({
        proxy: 'localhost'
    })
})

//监听文件变化，时时刷新浏览器
gulp.task('watch',function(){
    livereload.listen()
    gulp.watch('css/*.less', ['less'])
    gulp.watch('js/**/*.js', ['compress'])
    gulp.watch('tpls/**/*.html', ['html'])
})

gulp.task('html',function(){
    gulp.src('tpls/**/*.html')
        .pipe(bs.reload({stream: true}))

})

gulp.task('dev', ['bs', 'compress', 'less', 'watch'])

gulp.task('default',['compress','less','watch'])

推荐一个典型的gulp配置文件

yeomon—我的理解就是把项目从创建到开发到发布的一切工作帮我们安排好

npm install -g yo

npm install -g generator-webapp

yo webapp

脚手架，一键自动生成一个配置好的项目，包括目录结构，项目依赖，开发依赖

一般和bower gulp 结合

自定义一个yeoman 包

详细步骤见: 创建一个脚手架

大致如下

npm install -g generator-generator
yo generator

会生成一个目录结构

--generators/
----app/
---------temlates/ 此目录中放静态文件,以供拷贝
---------index.js 默认会运行的文件其他省略

运行完index.js然后

npm link

随后就可以

 yo name

二、项目构建起来，需要remind的点

作为一名项目搭建者，在你没开始你的项目之前，你就应该想到一个项目该有的规范和提示，方便你的组员和未来加入进来的伙伴能迅速的了解、融入你的项目，从而加入开发，提升工作效率。

下面就以我自己做过的admin项目为例，项目采用 gulp 进行项目自动化构建管理，依赖的服务器是nginx，托管代码的是gitlab,运用的工作流是git，使用的语言是angular。

基本说明

关于项目写不写分号，admin 项目统一不写分号。
项目接口记得加上时间戳，目的是为了在数据获取上兼容IE浏览器，不加时间戳会让IE浏览器返回旧数据。
项目中的所有利率转化由前端完成，后端不管数据处理的单位，Angular 提供了过滤器，前端实现数据显示转化也很简单。
项目的侧边栏是已经写好的指令，需要增加新的菜单时，到指令里配置侧边栏的目录数据结构就行。
关于模块公用，开发时最好考虑下可以公用的方法和模块，减少写重复性的代码。
项目采用 MVC 模式开发，请把业务逻辑写到控制器里，把数据处理写到模型里，把页面写到视图里

这是这个项目的一些基本要点，每一个项目都有自己特定的说明，大家因自己的项目而定，看需要对对应要点进行说明即可。

代码规范

代码书写规范化，关系到了一起研发的同事的工作的幸福指数，大家要对自己的代码负责，在我们的项目中，我们推崇规范化，创新化，你可以不用写 ES5，大胆的尝试 ES6吧，然后在你的代码里，请按照这个规范来写AngularJS Style Guide

内容会比较多，刚开始的话，你可以一点点的看起来，代码规范入手的话，你可以从controller先，在 view 中用 controller as 的语法来写，在 controller 里，把数据绑定到 this 对象上暴露给视图，不明白具体操作的话，可以参照运营管理模块的控制器channel.js。然后由于大家的IDE 使用可能会不一样，但是你需要确保你的缩进和大家的保持一致，就是新写的代码，缩进不要和原有缩进不一样。

当然，如果你们的代码有详细的规范，你们一定要强调出来，罗列出来规范的文档，方便开发者统一代码格式，我这里就是强调这是一个要点。争取达到不管有多少人共同参与同一个项目，一定要确保每一行代码都像是同一个人编写的境界。

项目构建

admin 项目采用 gulp 进行项目自动化构建管理，任务包括语法检查，es6 语法转化，代码压缩，浏览器自动刷新等，有需要的其他构建需求的欢迎自行添加任务。如果对 gulp 还不了解，可以学习下这个教程gulp 中文网
项目的依赖以及构架的包你可以通过 npm 进行安装，因为 npm 的服务器在国外，会比较慢，你可以先安装 cnpm ，再用 cnpm 来进行项目依赖以及构建工具的安装，这样会稍微快一些。

你的项目是如何构建起来的，具体怎么操作，这个也是需要提醒的哦，这样，新接触项目的人，才能在最短的时间将一个项目成功地跑起来。

版本管理

admin 项目采用 git 作为项目的版本管理工具，使用 gitLab 进行代码托管，如果你没有玩过 git ，你可以看下这个推荐教程猴子都能动的git教程我们推荐使用 git 的命令行工具，但是如果你非要用图形化工具的话，我们也不会打你。

版本迭代

版本	–: 迭代内容 :–
v2.0	系统管理 2. 用户管理
v2.1	产品模块
v2.1sp1	风控模块
v2.2	财务管理模块
……	……

版本迭代就像一个时间轴，记录着你们项目的成长过程以及进展，也提醒着你们的工作进程，以后有新的版本出来，就可以随时就行更新，维护。

git 工作流

admin 的 git 工作流，在我们的理想状态下是采用标准的git flow，master 分支维持线上环境，dev 分支维持测试环境，功能开发则在相应的功能分支上开发。常用的git命令
0. git clone 克隆项目到本地
1. git status 查看本次所做修改的文件
2. git diff 查看文件具体修改内容
3. git add 添加修改文件到暂存区
4. git commit -m "msg" 添加本次修改的描述
5. git push 把项目推送到远程仓库
6. git pull 把远程仓库的代码更新到本地
7. git checkout 分支名切分支
8. git checkout -b 创建分支，并切到分支
9. git merge 分支名 把目标分支的代码合并到当前分支上

这个是我们的项目的常用到的git命令，你们的工作流是什么呢？也可以总结出来哦！

项目模块划分

admin 项目按照开发模块划分，按照目前已经开发的模块，具体可以划分为系统模块，用户模块，风控模块，产品模块，财务模块，活动模块这六大模块。采用了反向代理来解决跨域问题。在反向代理的配置中，不通的功能模块有不通的代理模块，具体看项目servers里的代码。

可以把自己的项目进行一个总的划分，做到心中有数。

你可以复用不必重复劳动

在开发前如果考虑复用能精简代码，减少劳动力，公用函数可以封装到服务和指令里，对DOM 的扩展你可以写在指令里，对数据的获取你可以封装到公用的server里。

服务

loanBasic 主要是财务的复用函数，以及财务的数据字典复用
tools 主要是工具类的函数复用

指令

listForm 后台的分页列表
header 头部
sidebar 侧边栏
pagination 分页
fdFileUpload 图片上传预览

这就是我从进入工作以来的一些感触和小总结，可能不够全面，也不够准确，就是分享出来，给刚接触前端自动化的伙伴们一些启发，以及我们如何能快速地进入一个项目，该从哪里看起，找对方向。欢迎大家一起来讨论。

~END~

我是渲染的一抹寂静(关注我)
追求自由独立简单努力做一个热爱生活珍惜生命的人
白天是个哼次哼次敲代码的程序猿，晚上是读书，健身，享受生活的自由者。
如果你喜欢我的文字和内容，关注我，一起加油一起进步不定期更文，我等你来哦！