前端总结

库与工具

1.nodejs
前端基础运行环境, 提供大量模块。

    npm install modulename --save-dev 
    安装模块并把模块信息加入package.json文件，--save生产环境 -dev开发环境。
    npm uninstall modulename

    在package.json文件里
    "scripts": {
        "start": "node app.js"
      },
    当运行npm start时，则运行node app.js命令。

    当package.json里对包依赖已经有明确定义。
    运行npm install会安装所有需要安装的包。

2.工具管理模块gulp
在项目根路径和package.json同目录路径下创建gulpfile.js并增加如下内容

var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');

// scripts task
gulp.task('check_scripts', function() {
  return gulp.src('./www/dist/js/app.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// styles task
gulp.task('styles', function() {
  return gulp.src('./www/css/*.css')
    .pipe(cleanCSS())
    .pipe(concat('app.css'))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./www/dist/css/'));
});

// scripts task
gulp.task('scripts', function() {
    return gulp.src('./www/dist/js/*.js')
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./www/dist/js/all/'))
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./www/dist/js/all/'));
});

gulp.task('default', ['scripts', 'styles']);

用npm 安装所需要包后npm install gulp -dev,npm install gulp-concat…..
运行gulp taskname
则运行相应的压缩，整合功能。
具体内容，请参考最新官方文档。

3.bower 前端库管理工具，会下载可用于网页的库代码。（现已停止维护）

4.cordova, phonegap,ionic –> hybrid app 应用组件和生态环境。（具体内容会在其他文章里继续）。

5.express, ejs ,jade,http,https,fs….. node于后端和服务器端模块。可用于构建一个后台服务器。

6.angularjs, reactjs –> 前端流行框架。用于架构新一级的前端服务。

7.threejs基于webgl的3d图形操作库。

8.requirejs,seajs –> 用于前端模块化的组织工具。

9.bootstrap, jquerymobile –> 前端UI库。

10.createjs –> 用于web的开源2d游戏引擎。

IDE

webstorm
dreamweaver
hbuilder
notepad++
chrome browser

拓展

cocos – 2d商用游戏引擎(支持js脚本）
unitity – 3d商用游戏引擎(支持js脚本）