快速搭建好一个项目,你必须掌握这两步
来源:互联网 发布:唐努乌梁海 知乎 编辑:程序博客网 时间:2024/05/20 07:58
随着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 -vnpm 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()//压缩jsgulp.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文件。//压缩CSSgulp.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-generatoryo 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 的命令行工具,但是如果你非要用图形化工具的话,我们也不会打你。
版本迭代
版本迭代就像一个时间轴,记录着你们项目的成长过程以及进展,也提醒着你们的工作进程,以后有新的版本出来,就可以随时就行更新,维护。
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~
我是渲染的一抹寂静(关注我)
追求自由 独立 简单 努力做一个热爱生活 珍惜生命的人
白天是个哼次哼次敲代码的程序猿,晚上是读书,健身,享受生活的自由者。
如果你喜欢我的文字和内容,关注我,一起加油 一起进步 不定期更文,我等你来哦!
- 快速搭建好一个项目,你必须掌握这两步
- 如何快速掌握一个开源项目
- 如何快速掌握一个开源项目
- 零基础带你3步快速掌握iSCSI搭建
- 带你3步快速掌握iSCSI搭建
- 一个iOS开发者必须掌握的66个知识点,你掌握了多少?
- 教你快速掌握一个简单的Oracle定时任务
- 教你快速掌握一个简单的Oracle定时任务
- 教你快速掌握一个简单的Oracle定时任务
- 快速掌握机器学习,这 3 种算法你必须知道!
- 让你快速搭建一个bootstrap页面
- 如何快速搭建一个CakePHP项目
- nodejs express 快速搭建一个项目过程
- SpringBoot(一):快速搭建一个springboot项目
- 快速搭建一个简单的springboot项目
- 作为一个优秀的程序员,你必须要有一个好的身体!你必须经常参加户外活动!
- Android: 你必须掌握的Android命令
- 你必须掌握的人生定律
- 在使用javascript-state-machine状态机调用异步钩子函数时,卡死问题及抛出异常问题
- py json处理
- 2017年1月前端面试记
- 大整数运算(高精度运算)
- linux中的系统调用机制
- 快速搭建好一个项目,你必须掌握这两步
- 【HDU4348】To The Moon-主席树(可持久化线段树)区间修改+区间询问
- Java SSM 商户管理系统 客户管理 库存管理 销售报表 项目源码
- 远程通讯____webservice简单例子摘抄IBM
- 最近有点为北京感到难过
- postgresql配置数据库链接信息监控
- tomcat优化
- 什么是阿里云数加大数据计算服务MaxCompute?
- js和php中if判断空数组的差异