[FE] 有效開展一個前端項目1 (gulp/angular)

 

今天的前端若是沒有用到 npm，效率是比較低的；因此要從使用的工具來說。

 

1. 一切都依賴於 nodejs：

　　下載一個 linux 的源碼包就能夠開始安裝了。

　　$ wget https://nodejs.org/dist/v4.4.7/node-v4.4.7.tar.gz
　　$ ./configure --prefix=/usr/local/nodejs
　　$ make && sudo make install

　　裝好後，npm 已經在/usr/local/nodejs/bin/npm。

 

　　若是以前有安裝過 nodejs 的狀況，最好確認下當前使用的是不是剛安裝的命令：

　　$ which node
　　$ which npm

　　把不須要的舊版本刪除便可。

 

2. 用 npm init 建一個項目依賴包的說明文件 package.json：　

{
  "name": "front",
  "description": "my application",
  "version": "0.0.1",
  "author": {
    "name": "farwish"
  },  
  "main": [
    "index.js"
  ],
  "license":"MIT", 
  "repository":{},
  "dependencies": {
  }
}

 

3. 任務流命令 gulp：

　　先把 nodejs 的命令加到環境變量裏，能夠直接加 /usr/local 到 PATH 中。

　　（ PATH=$PATH:$HOME/.local/bin:$HOME/bin:/usr/local ）

　　$ source ~/.bash_profile
　　$ npm install -g gulp　　　　 # 全局安裝，gulp 命令會裝到 /usr/local/nodejs/bin/
　　$ npm install gulp --save　　# 安裝到當前項目的 node_modules/，並寫入package.json的dependencies

　　若是出現權限錯誤，通常是 /usr/local/nodejs/lib/node_modules 沒有寫權限，全局安裝用 root 用戶；

　　本地 Local gulp 用普通用戶安裝，把 npm 創建在項目中的 node_modules/ 所屬改爲當前用戶和用戶組。

 

4. 一個實用庫 browserSync：

　　browserSync 能檢測文件變更並自動刷新瀏覽器，不依賴瀏覽器插件。

　　$ npm install browser-sync --save

　　（browser-sync start --server --files "src/*.html"  # 用於靜態文件，監測src目錄的html文件）

　　（browser-sync start --proxy "localhost:8080" --file "css/*.css" # 動態站點使用代理模式）

 

5. 建一個任務流文件 gulpfile.js：

　　在 gulpfile 中使用 browserSync 庫。

var gulp = require('gulp');
var browserSync = require('browser-sync');
var path = { 
    src:"src/*.html"
};

// 名叫 browser-sync 的任務
gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    }); 
});

// gulp 自動執行 default 任務
gulp.task('default', ['browser-sync']);

 

　　$ gulp 　　# 運行gulp，而後編輯並保存監聽的文件就能看到效果

 

6. 第一開發框架 angularjs：

　　小巧的 css 庫有 pure，功能型的有 uikit，至於 bootstrap 已經滿大街，隨便選。

　　js 框架首選 angularjs，不過庫的尺寸都不小。

 

　　angular 也是一個能快速搭建原型的工具，經過 ui-router 很容易組織頁面間關係。

　　徹底拋棄 dom 操做和 load 操做的感受，和 jquery 時代有巨大差異。

　　angular 的難點在於概念，各類 $provider 使人迷惑，實際上框架咱們知道怎麼用就行，不用盯住具體哪一個是什麼概念，能用起來，後面省事省力。

 

[FE] 有效開展一個前端項目1 (gulp/angular)

[FE] 有效開展一個前端項目2 (vuejs-templates/webpack)

[FE] 有效開展一個前端項目3 (Vue CLI / Vue SSR )

 

Link: http://www.cnblogs.com/farwish/p/5656959.html