grunt让Nodejs规范起来 - 生活@就这么简单 - 推酷
grunt让Nodejs规范起来 - 生活@就这么简单
，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！
张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
转载请注明出处：
一个应用开发到一定阶段，普遍会遇到一个问题。当功能越来越多，代码量越来越大，bug修复越来越频繁，开发人员一波一波的交替，…..应该用会向着越来越不可控发展。我们不能再准确估计新功能的开发时间，也不知道一个bug修复后是否会引发另一个bug出现。所有的程序开发，都会面临着这样的问题。
C/C++程序通过makefile管理编译测试打包的过程，Java程序通过Maven,Ant实现项目构建管理功能，Python有pip，Ruby有gem。在Nodejs的领域，我们同样需要一个项目构建工具，这就是Grunt。Grunt可以执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务。
Grunt常用插件：
1).grunt-contrib-uglify：压缩js代码
2).grunt-contrib-concat：合并js文件
3).grunt-contrib-qunit：单元测试
4).grunt-contrib-jshint：js代码检查
5).grunt-contrib-watch：文件监控
1. Grunt介绍
Grunt是一个自动化的项目构建工具. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt来处理这些任务, 你所需要做的只是配置好Grunt, 这样能很大程度的简化你的工作.
如果在团队中使用Grunt, 你只需要与其他人员约定好使用Grunt应该规避的问题, 就能够很方便的自动化的处理大部分的常见工作任务, 你所付出的努力几乎为0.
2. Grunt安装
Grunt和Grunt插件都是通过npm, Node.js包管理器安装和管理的.
我的系统环境
win7 64bit
Nodejs:v0.10.5
Npm:1.2.19
~ D:\workspace\javascript&node -v
~ D:\workspace\javascript&npm -v
在系统中，我们已经安装好了Nodejs和npm。win7安装nodejs请参考文章：
安装grunt-cli
grunt-cli并不grunt，grunt-cli的作用是管理本地各版本的grunt，让命令行可以直接执行grunt命令。
下面全局安装grunt-cli(-g)
~ D:\workspace\javascript&npm install -g grunt-cli
D:\toolkit\nodejs\grunt -& D:\toolkit\nodejs\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.9 D:\toolkit\nodejs\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.4)
└── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21)
我们看到grunt-cli似乎做了一个软件链接，把grunt脚本复制到nodejs安装根目录里。
接下来全局安装grunt
~ D:\workspace\javascript&npm install -g grunt
~ D:\workspace\javascript&grunt
grunt-cli: The grunt command line interface. (v0.1.9)
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
/getting-started
执行grunt命令，我们发现系统报错了，提示不能加载本地库。因为，grunt命令执行，是需要当前目录中包括package.json和Gruntfile.js两个文件。
package.json，是npm项目配置文件
Gruntfile.js，是专门用来配置grunt的配置文件
接下来，我们创建一个express3的项目。
~ D:\workspace\javascript&express -e nodejs-grunt
~ D:\workspace\javascript&cd nodejs-grunt && npm install
~ D:\workspace\javascript\nodejs-grunt&npm install grunt --save-dev
安装-save-dev，就可以，直接把grunt作为devDependencies写入的package.json中。
~ vi package.json
&name&: &nodejs-grunt&,
&version&: &0.0.1&,
&private&: true,
&scripts&: {
&start&: &node app.js&
&dependencies&: {
&express&: &3.2.2&,
&ejs&: &*&
&devDependencies&: {
&grunt&: &~0.4.1&,
然后，我们再执行grunt，系统提示缺少Gruntfile文件
~ D:\workspace\javascript\nodejs-grunt&grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: /getting-started
Fatal error: Unable to find Gruntfile.
创建Gruntfile文件
~ vi Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today(&yyyy-mm-dd&) %& */\n'
src: 'src/&%= pkg.name %&.js',
dest: 'build/&%= pkg.name %&.min.js'
// Load the plugin that provides the &uglify& task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
再次运行grunt，这时提示是grunt-contrib-uglify包找不到，是Gruntfile.js配置文件中的错误了。
~ D:\workspace\javascript\nodejs-grunt&grunt
&& Local Npm module &grunt-contrib-uglify& not found. Is it installed?
Warning: Task &uglify& not found. Use --force to continue.
我们编辑package.js, 在devDependencies中增加grunt-contrib-uglify的依赖库
~ vi package.js
&name&: &application-name&,
&version&: &0.0.1&,
&private&: true,
&scripts&: {
&start&: &node app.js&
&dependencies&: {
&express&: &3.2.2&,
&ejs&: &*&
&devDependencies&: {
&grunt&: &~0.4.1&
&grunt-contrib-uglify&: &~0.1.1&
~ D:\workspace\javascript\nodejs-grunt&npm install
我们创建两个目录src和build，和nodejs-grunt.js的文件
~ D:\workspace\javascript\nodejs-grunt&mkdir src
~ D:\workspace\javascript\nodejs-grunt&mkdir build
~ D:\workspace\javascript\nodejs-grunt&vi src/nodejs-grunt.js
var sayHello = function(name){
return &Hello & +
我们再执行grunt
~ D:\workspace\javascript\nodejs-grunt&grunt
Running &uglify:build& (uglify) task
File &build/nodejs-grunt.min.js& created.
Uncompressed size: 59 bytes.
Compressed size: 40 bytes gzipped (43 bytes minified).
Done, without errors.
grunt运行正常，并且执行了uglify:build的任务。打开build/nodejs-grunt.min.js文件
~ D:\workspace\javascript\nodejs-grunt&vi /build/nodejs-grunt.min.js
/*! nodejs-grunt
var sayHello=function(l){return&Hello &+l};
我们可以看到一个新生成的压缩文件nodejs-grunt.min.js。
上面的例子，是一个js文件压缩的例子。
3. Grunt使用
我们可以通过help帮助，看一下grunt怎么用。
~ D:\workspace\javascript\nodejs-grunt&grunt --help
Grunt: The JavaScript Task Runner (v0.4.1)
grunt [options] [task [task ...]]
--help, -h
Display this help text.
Specify an alternate base path. By default, all file paths are
relative to the Gruntfile. (grunt.file.setBase) *
--no-color
Disable colored output.
--gruntfile
Specify an alternate Gruntfile. By default, grunt looks in the
current or parent directories for the nearest Gruntfile.js or
Gruntfile.coffee file.
--debug, -d
Enable debugging mode for tasks that support it.
Print a stack trace when exiting with a warning or fatal error.
--force, -f
A way to force your way past warnings. Want a suggestion? Don't
use this option, fix your code.
Additional directory paths to scan for task and &extra& files.
(grunt.loadTasks) *
Npm-installed grunt plugins to scan for task and &extra& files.
(grunt.loadNpmTasks) *
--no-write
Disable writing files (dry run).
--verbose, -v
Verbose mode. A lot more information output.
--version, -V
Print the grunt version. Combine with --verbose for more info.
--completion
Output shell auto-completion rules. See the grunt-cli
documentation for more information.
Options marked with * have methods exposed via the grunt API and should instead
be specified inside the Gruntfile wherever possible.
Available tasks
Minify files with UglifyJS. *
Alias for &uglify& task.
Tasks run in the order specified. Arguments may be passed to tasks that accept
them by using colons, like &lint:files&. Tasks marked with * are &multi tasks&
and will iterate over all sub-targets if no argument is specified.
The list of available tasks may change based on tasks directories or grunt
plugins specified in the Gruntfile or via command-line options.
For more information, see /
有两方面是我们需要注意的：
Options: grunt支持的命令
Available tasks: 当目录可执行的任务
4. Grunt常用插件
grunt-contrib-uglify：压缩js代码
grunt-contrib-concat：合并js文件
grunt-contrib-qunit：单元测试
grunt-contrib-jshint：js代码检查
grunt-contrib-watch：监控文件修改并重新执行注册的任务
1). grunt-contrib-uglify：是执行压缩JS代码的任务
具体操作请查看”2.Grunt安装”，
2). grunt-contrib-concat：是执行合并文件的任务。
插件安装及更新到配置
~ D:\workspace\javascript\nodejs-grunt&npm install grunt-contrib-concat --save-dev
修改Gruntfile.js文件
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
//定义一个字符串插入没个文件之间用于连接输出
separator: ';'
src: ['src/*.js'],
dest: 'build/&%= pkg.name %&.cat.js'
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.registerTask('default', ['uglify','concat']);
在src目录，新增加文件src/sayBye.js
~ vi src/sayBye.js
var sayBye = function(name){
return &Bye & +
执行concat任务
~ D:\workspace\javascript\nodejs-grunt&grunt concat
Running &concat:dist& (concat) task
File &build/nodejs-grunt.cat.js& created.
Done, without errors.
查看生成的文件build/nodejs-grunt.cat.js
~ vi build/nodejs-grunt.cat.js
var sayHello = function(name){
return &Hello & +
};var sayBye = function(name){
return &Bye & +
两个文件完全的合并。
3). grunt-contrib-qunit：是执行QUint单元测试的任务。
插件安装及更新到配置
~ D:\workspace\javascript\nodejs-grunt&npm install grunt-contrib-qunit --save-dev
修改Gruntfile.js文件
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
files: ['test/*.html']
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.registerTask('default', ['uglify','concat','qunit']);
创建一个test目录，并编写用于测试的qunit.html文件
~ mkdir test
~ vi test/qunit.html
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&link rel=&stylesheet& href=&/jquery/qunit/raw/master/qunit/qunit.css& type=&text/css& media=&screen& /&
&script type=&text/javascript& src=&/jquery/qunit/raw/master/qunit/qunit.js&&&/script&
test(&hello&, function() {
ok(true, &world&);
&h1 id=&qunit-header&&QUnit example&/h1&
&h2 id=&qunit-banner&&&/h2&
&h2 id=&qunit-userAgent&&&/h2&
&ol id=&qunit-tests&&&/ol&
执行qunit命令
~ D:\workspace\javascript\nodejs-grunt&grunt qunit
Running &qunit:files& (qunit) task
Testing test/qunit.html .OK
&& 1 assertions passed (67ms)
Done, without errors.
完成单元测试！！
4). grunt-contrib-jshint：是执行代码验证的任务
插件安装及更新到配置
~ D:\workspace\javascript\nodejs-grunt&npm install grunt-contrib-jshint --save-dev
修改Gruntfile.js文件
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
files: ['gruntfile.js', 'src/*.js', 'build/*.js'],
options: {
globals: {
exports: true
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['uglify','concat','qunit','jshint']);
执行jshint代码检查
~ D:\workspace\javascript\nodejs-grunt&grunt jshint
Running &jshint:files& (jshint) task
Linting src/nodejs-grunt.js ...ERROR
[L3:C2] W033: Missing semicolon.
Linting build/nodejs-grunt.cat.js ...ERROR
[L5:C2] W033: Missing semicolon.
Linting build/nodejs-grunt.min.js ...ERROR
[L2:C42] W033: Missing semicolon.
var sayHello=function(l){return&Hello &+l};
Warning: Task &jshint:files& failed. Use --force to continue.
Aborted due to warnings.
好多的错误啊，细看一下，都是”丢失分号”的错误。
~ vi src/sayBye.js
var sayBye = function(name){
return &Bye & +
增加最后一行的分号，解决上面的错误。
5). grunt-contrib-watch，是监控指定文件被修改，重新启动已注册的任务
我感觉这个插入，就点类似于supervisor的功能。
插件安装及更新到配置
~ D:\workspace\javascript\nodejs-grunt&npm install grunt-contrib-watch --save-dev
修改Gruntfile.js文件
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
files: ['&%= jshint.files %&'],
tasks: ['jshint', 'qunit']
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify','concat','qunit','jshint']);
执行watch任务
~ D:\workspace\javascript\nodejs-grunt&grunt watch
Running &watch& task
Waiting...OK
#手动修改src/sayBye.js文件，下面watch的任务被触发
&& File &src\sayBye.js& changed.
Running &jshint:files& (jshint) task
Linting src/sayBye.js ...ERROR
[L3:C2] W033: Missing semicolon.
Linting build/nodejs-grunt.cat.js ...ERROR
[L3:C3] W032: Unnecessary semicolon.
};;var sayBye = function(name){
Linting build/nodejs-grunt.min.js ...ERROR
[L2:C42] W033: Missing semicolon.
var sayHello=function(l){return&Hello &+l};
Warning: Task &jshint:files& failed. Use --force to continue.
Aborted due to warnings.
Completed in 0.770s at Sat Aug 17 :15 GMT+0800 (中国标准时间) - Waiting...
上面介绍的5个任务，可能是我们比较常用配置的任务，大家也可以按照需要指定自己的任务。
下面贴上所最终的package.json和Gruntfile.js文件代码
package.json
&name&: &nodejs-grunt&,
&version&: &0.0.1&,
&private&: true,
&scripts&: {
&start&: &node app.js&
&dependencies&: {
&express&: &3.2.2&,
&ejs&: &*&
&devDependencies&: {
&grunt&: &~0.4.1&,
&grunt-contrib-uglify&: &~0.1.1&,
&grunt-contrib-concat&: &~0.3.0&,
&grunt-contrib-qunit&: &~0.2.2&,
&grunt-contrib-jshint&: &~0.6.3&,
&grunt-contrib-watch&: &~0.5.2&
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today(&yyyy-mm-dd&) %& */\n'
src: 'src/&%= pkg.name %&.js',
dest: 'build/&%= pkg.name %&.min.js'
options: {
//定义一个字符串插入没个文件之间用于连接输出
separator: ';'
src: ['src/*.js'],
dest: 'build/&%= pkg.name %&.cat.js'
files: ['test/*.html']
files: ['gruntfile.js', 'src/*.js', 'build/*.js'],
options: {
globals: {
exports: true
files: ['&%= jshint.files %&'],
tasks: ['jshint', 'qunit']
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['uglify','concat','qunit','jshint']);
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致当前访客身份：游客 [
http://1ke.co
：引用来自“teardream”的评论你这是无视os@git啊...
：你这是无视os@git啊，红薯不能忍的说。
：放在github
：引用来自“Mehost”的评论:passw...
：多看帮助, 或联系客服!
：: 不光光只是c...
：引用来自“Andy_Zhou”的评论 也在学习中
：也在学习中
：引用来自“hqxluoyang”的评论vue.js绝对有戏妹子...
：vue.js绝对有戏妹子，你用了就知道爽的滋味了
今日访问：52
昨日访问：33
本周访问：175
本月访问：507
所有访问：11474
如何让nodejs在linux后台运行
发表于3个月前( 02:50)&&
阅读（193）&|&评论（）
0人收藏此文章,
加入 主文件是 index.js
那么可以用的方法有：
& 1.用forever &进行管理
npm&install&-g&forever
forever&start&index.js
2. 用自带的服务nohub
nohup&node&index.js&&&myLog.log&2&&1&&
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读感觉学的过于坎坷，不得不提问了。一开始看的书是 nodejs入门的，教如何搭建一个简单的博客，用的是express，可是那本书讲的是2.0版本的，现在express都4.0了，满地的坑，实践了一天后，网上各种找解决方案，最后还是不得而终。接下来群里人经验告诉我不要用express，直接用thinkjs，又去读它的文档，对没有后端经验的阅读者来说很不友善。读到模块/数据库章节，发现demo要操作数据库。看不懂，无奈又去学习了下MySQL的基础，回来后发现还是看不懂，让php同事一看说相当于用js写thinkphp…于是thinkjs也卡这里了，现在就会搭建一个服务器，配置路由的跳转和使用非阻塞的理念调用传递req对象，想进一步学习却找不到入口了，网上下来的demo也是各种不会用…累觉不爱啊，难道要我先学php扎实下基础吗=_=
开始不要去看那些框架，就像你不懂js的语法直接学习jquery是什么感觉，知其然而不知所以然，并且对jquery的把握也停留在表面不能深入和精准的理解，只知道如何使用。框架是在充分了解一个语言之后做出的封装和模式的总结，减少重复，使用经过验证的抽象和方法。所以学习node.js先了解node.js本身。推荐看它的官方文档，了解它的API，尤其是它的测试用例应该是覆盖了API的使用模式。运行了解官方的例子。作为一个服务器，要把握住一个核心的东西就是接受请求和发送请求，也就是request和response，其它都可以放放。等你了解了，node.js是如何接收请求的，数据是如何传递过来的， 如何拿到这些数据的，那么如何处理就是具体需求对待了。接下来，了解了如何回复请求的，那么如何生成你要的数据，如何吧这些数据发送出去。不就完成了一个服务器的基本功能了。其他的用到的时候自然就查查就了解了。
蟹妖，完全没有基础的话，建议先学一门web语言，比如PHP（我是认真的）。不用学深，也不要学框架，会做个能写能看能删能改的博客就行了，不要花功夫做界面，土鳖的就行，最好有数据库，没有的话写文件里也凑合了。然后再回来看express什么的不过如是嘛……
蟹妖，完全没有基础的话，建议先学一门web语言，比如PHP（我是认真的）。不用学深，也不要学框架，会做个能写能看能删能改的博客就行了，不要花功夫做界面，土鳖的就行，最好有数据库，没有的话写文件里也凑合了。然后再回来看express什么的不过如是嘛……
先分享点最新的经验：学东西主要还是坚持，做事情主要还是计划，最终靠的是执行力或毅力。&br&最后给点建议：nodejs或php，其实看你手中掌握的资源，什么叫资源。就是有没有认识相关的朋友，同事。有问题的时候能够很好的求教他。如果没有那就建议nodejs，他现在毕竟是工程化的代名词，但还是有个前提，如果是前端，建议还是把js弄清楚了，东一枪西一棒，最后啥也捞不着。&br&&br&分享一下以前写的文章，凑合看吧，仅供参考：&br&当看到这个问题之前，我也碰到过很多有同样疑惑的同学，他们都有一个共同的疑问该学php还是nodejs，如果学nodejs该如何学习，包括我自己也曾有过同样的经历。幸运的是，通过我内心的挣扎和对当前市场供需关系以及行业发展前景的综合衡量评估后，我还是在接触了java, php之后回到js这片天空上来了。一方面是客观因素，一方面是兴趣导致的，前端太好玩了，值得为此奉献一点激情或青春。&br&其实这也是一个开发者成长必须经历的一个洗礼，一个磨难，一个挑战，他是一个必然的过程。很多人不差智商，不输情商，四肢健全，就是学不好一门语言。我认为最主要还是败在了坚持，专注上面了。经受不住内心私欲或其它语言的诱惑，都一一败下阵来。缺少的就是：坚持专注。业界坚持专注代表： @司徒正美， @张鑫旭 。司徒大牛 600篇js文章，是岁月、历史和势力的见证。张同学42页博文也是伴随着我们的不断成长。 &br&&br&然后说了解后台语言，到底要了解到什么程度呢？&br&其实说后台语言，就个人看其实他包括两类语言，一个叫操作数据库的语言，比如java,php,nodejs,ruby,python,c#等等。一个叫数据库操作语言，比如sql，包括基本的insert,update,select,delete四个动作。所有的页面的一切数据交互都基于这四个操作。从我个人的经历推荐两本书：php与mysql程序设计，第四版，细说php，第二版。这两本都是比较全面的介绍了php，包含了php基本概念与mysql的知识，但都比较浅显，入门而已。&br&到现在你会发现，其实从前端的角度出发，语言有两种，客户端服务端，服务端又是数据库或非数据库。然后就有方向了，学了js，学任何一门操作数据库的语言(后台语言)，数据库操作语言，然后就可以自由组合搭配。而且语言之间有很大的相似性，都可以无缝的跨界。区别的是语言开发的所依赖平台，比如c#依赖于.net，php经常与apache,mysql结合，java依赖于jdk等等的。开发工具也各有不同，比如vs,phpstorm、zendstudio， intellij idea, eclipse等等。但他们的api却很像似，粗暴点说，你抄我我抄你，你中有我，我中有你。&br&从前端的角度出发我推荐2门语言：php,nodejs。想照顾一些老的东西，维护一些老项目，就选php。展望新方向工程化操作比较多就nodejs。这两个语言各有所长，只是nodejs从语法上来说跟js是无缝的，但它也有缺点，一上手可能不能真正的区分客户端或服务端之后的差别。php的oop跟接近于java的纯oop风格。但这2个从操作sql的方面来说，有很大的相似性。按照这个结论下来，无论选nodejs,php都可以，可以从主观上判断，你更喜欢那个。或者做一个小的留言板，看看那个更符合你的思维习惯。&br&一般的瓶颈就是你得少，建议多写，用解决实际问题的经验来跨越语言造成的障碍。&br&以下是我学习php的一些历程，分享一下，仅供参考：&br&1. 留言板，&br&2, blog&br&3. 企业站，&br&4. 商城&br&5. 新闻综合站。&br&基础的入门之后，就是框架了，从我个人浅显的了解当中，分享一下经验，大概市面上有这几个框架：&br&1. ci 经典的轻巧框架，在全球的使用量比较靠前，入门比较简单。&br&2. thinkphp，国内人用的比较多，是国人开发，现在势头真猛，比ci封装的更好，也更傻瓜。&br&3. yii，这个是目前全球排名第一的框架，但是入门曲线稍高。&br&4. zend frame这是有php组织开发的框架，文档比较规范，也比较重，适合构建大型项目。&br&5. laravel 这是一个呼声比较好的一个新型框架，借鉴了Symphony，各方面比较优秀，博众家之所长，但是相对中文资料比较少。&br&等这些了解了，估计已经入门了，学习应该找到具体的方向了。另外兄弟连的视频教程，质量一般，胜在量多，从基础到框架，应有仅有，最主要是免费。&br&&br&然后回归正题，只是建议你了解，点到为止，了解是为了把前端干的更好。那什么时候真正的深入学习？建议在学好js的前提之下，吃透js。&br&比如了解js的作用域，闭包，原型，继承，尤其是作用域与面向对象是js的特色也是与任何一门后台语言比较容易混淆的两个地方。&br&请向各个业界js大牛看起，不一定非要那么深的深度，但一定达到自己力所能及的高度。&br&比如有个自己的框架，如司徒正美avlon，比如有一个自己写的小框架，如玉伯的seajs等等。&br&&br&另外我个人的经验：学什么语言不重要，重要的是趋势你学语言的动力，说白了真正的需求兴趣来自那些。我认为兴趣有两方面。一方面是内在主动型的。比如js学习到一定的程序，写了很多demo或想法需要用更个性化的方式来呈现，这时候需要建一个个人网站或博客来管理你的内容。这时候才选择语言，了解需求产生，开发，发布上线的流程，对你以后的前端工作也是有帮助的。另外一个是外在被动型的，比如同学，家乡的朋友，需要你帮忙做一个企业网站，小的电商网站来做为他们初期企业文化愿景宣传的一个互联网通道，这时候就是一个外在的需求。拿我个人经验来说，我的php经验完全是来自于一次接私单的经历。虽然那次私单以失败而告终，但我在一个月的业余时间里边彻底的了解了php的开发方式，语言特征，后来根据这个基础我成功的开发上线了另外一个朋友的个人网站：&a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&静静设计 - 一个用心创造设计改变生活的女设计师的个人博客网站&i class=&icon-external&&&/i&&/a&，这个网站的开发心得一直想写，但机会不凑巧，只能说敬请期待。明确一个自己感兴趣的目标之后，在选择语言，以兴趣引导语言，学习才有动力。比如做网站，那可能就是php,nodejs，做个简单的blog，在实践中慢慢了解语言，在学习中慢慢成长。 nodejs或php都有各自的应用场景，要么选一个公司现在用的，要么选择一个适合自己思维的。&br&&br&如果你学会了其中的一个，然后在去了解其它的，可以说，入门会很快，因为里边有很多相同的东西。&br&&br&最后总结一下我个人的心得：每个人都有好奇之心，这对做技术的来说并不是什么坏事，正因为这颗好奇之心，不断的带领向前迈进。另外了解一下满足一下好奇心没什么不好。就如同我当时学习php一样，感觉学习之后有多牛B，真正的学习后做了一个网站出来之后发现，确实收获不少，对前端也有帮助。但是js的水平还是在原地，除了擅长使用jquery之外，并没有太多的擅长。人的精力是有限的，能力是有限的，在有限的精力里边把一件事情做好就已经很不错了。&br&&br&再总结：可能有点急躁了，还是有个计划，需要慢慢的进行。&br&另外，nodejs之前先把js学好，知识与编程能力真的是两个概念。 &br&&br&最后实在找不到方向，就加个群：&b&&/b&，禁止闲聊，非喜勿进。
先分享点最新的经验：学东西主要还是坚持，做事情主要还是计划，最终靠的是执行力或毅力。最后给点建议：nodejs或php，其实看你手中掌握的资源，什么叫资源。就是有没有认识相关的朋友，同事。有问题的时候能够很好的求教他。如果没有那就建议nodejs，他现…
已有帐号？
无法登录？
社交帐号登录
编程是写作的子集}