為了UED前端團隊更好的協(xié)作開發(fā)同時提高項目編碼質量，我們需要將Web前端使用工程化方式構建；

目前需要一些簡單的功能：

    1. 版本控制
    2. 檢查JS
    3. 圖片合并
    4. 壓縮CSS
    5. 壓縮JS
    6. 編譯SASS

這些都是每個Web項目在構建、開發(fā)階段需要做的事情。前端自動化構建環(huán)境可以把這些重復工作一次配置，多次重復執(zhí)行，極大的提高開發(fā)效率。

目前最知名的構建工具： Gulp、Grunt、NPM + Webpack；
    grunt是前端工程化的先驅

    gulp更自然基于流的方式連接任務

    Webpack最年輕，擅長用于依賴管理，配置稍較復雜

    推薦使用Gulp，Gulp基于nodejs中stream，效率更好語法更自然,不需要編寫復雜的配置文件

Use Gulp to automate front-end build tasks

Gulp是基于 Node.js的，需要要安裝 Node.js

1、為了確保依賴環(huán)境正確，我們先執(zhí)行幾個簡單的命令檢查。
    node -v
    Node是一個基于Chrome JavaScript V8引擎建立的一個解釋器
    檢測Node是否已經(jīng)安裝，如果正確安裝的話你會看到所安裝的Node的版本號

2、接下來看看npm，它是 node 的包管理工具，可以利用它安裝 gulp 所需的包
    npm -v
    這同樣能得到npm的版本號，裝 Node 時已經(jīng)自動安裝了npm

3、開始安裝Gulp

    npm install -g gulp


    全局安裝 gulp

    gulp -v


    得到gulp的版本號，確認安裝成功

基礎安裝結束
-

4、切換到你的在項目根文件夾下，運行

    npm install gulp --save-dev //將具體的gulp功能插件局部安裝項目下

5、安裝gulp功能插件依賴包

    npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev

gulp功能模塊的文件會放在項目所在的目錄的./node_modules 下

6、我們目前先使用一些簡單的功能：
    - 檢查Javascript
    - 編譯Sass文件
    - 合并Javascript
    - 壓縮合并并重命名Javascript

新建gulpfile.js 配置文件放在項目根目錄下
 演示項目目錄結構

  testProject    (項目名稱)
  |–.git       通過git進行版本控制,項目自動生成這個文件
  |–node_modules   組件包目錄
  |–dist       **發(fā)布環(huán)境**（編譯自動生成的）
    |–css     樣式文件(style.css style.min.css)
    |–images   圖片文件(壓縮圖片\合并后的圖片)
    |–js     js文件(main.js main.min.js)
    |–index.html 靜態(tài)頁面文件(壓縮html)
  |–src       **開發(fā)環(huán)境**
    |–sass        sass文件
    |–images        圖片文件
    |–js         js文件
    |–index.html     靜態(tài)文件
  |–gulpfile.js       gulp配置文件
  |–package.json       依賴模塊json文件,在項目目錄下npm install會安裝項目所有的依賴模塊，簡化項目的安裝程序

現(xiàn)在，項目文件夾都建好，組件也安裝完畢了，我們需要編寫gulpfile.js文件以指定gulp需要為我們完成什么任務。
    gulpfile.js內容如下：

  // 引入gulp
  var gulp = require('gulp');

  // 引入組件
  var jshint = require('gulp-jshint');//檢查js
  var sass  = require('gulp-sass');  //編譯Sass
  var concat = require('gulp-concat');//合并
  var uglify = require('gulp-uglify');//uglify 組件（用于壓縮 JS）
  var rename = require('gulp-rename');//重命名

  // 檢查js腳本的任務
  gulp.task('lint', function() {
    gulp.src('./js/*.js') //可配置你需要檢查腳本的具體名字。
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
  });

  // 編譯Sass
  gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./css'));//dest()寫入文件
  });

  // 合并，壓縮js文件
  // 找到 js/ 目錄下的所有 js 文件，壓縮，重命名，最后將處理完成的js存放在 dist/js/ 目錄下
  gulp.task('scripts', function() {
    gulp.src('./js/*.js')
      .pipe(concat('all.js'))
      .pipe(gulp.dest('./dist'))
      .pipe(rename('all.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));

      console.log('gulp task is done');//自定義提醒信息
  });

  .... // 其他任務類似

  // 定義默認任務,執(zhí)行gulp會自動執(zhí)行的任務
  gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 監(jiān)聽js文件變化，當文件發(fā)生變化后會自動執(zhí)行任務
    gulp.watch('./js/*.js', function(){
      gulp.run('lint','scripts');
    });
  });

7、現(xiàn)在，回到命令行窗口，可以直接運行gulp任務了。
    gulp

    這將執(zhí)行定義的default任務，就和以下的命令式同一個意思

    gulp default

    當然，我們可以運行在gulpfile.js中定義的任意任務，比如，現(xiàn)在單獨運行sass任務：

    gulp sass

8、編譯會顯示Finished,如果你的JS有什么不好的地方它會提醒，避免一些不必要的錯誤，十分貼心

    常見提醒：

    1.禁止在同一行聲明多個變量。
    2.請使用 ===/!==來比較true/false或者數(shù)值
    3.使用對象字面量替代new Array這種形式
    4.不要使用全局函數(shù)。
    5.Switch語句必須帶有default分支
    6.函數(shù)不應該有時候有返回值，有時候沒有返回值。
    7.For循環(huán)必須使用大括號
    8.If語句必須使用大括號
    9.for-in循環(huán)中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。

9、gulp的插件數(shù)量很多，后面還可以根據(jù)自己的需要進行添加任務

    常用的gulp插件參考

    gulp-imagemin:         壓縮圖片
    gulp-ruby-sass:     支持sass，安裝此版本需要安裝ruby
    gulp-minify-css:     壓縮css
    gulp-jshint:          檢查js
    gulp-uglify:          壓縮js
    gulp-concat:        合并文件
    gulp-rename:          重命名文件
    gulp-htmlmin:         壓縮html
    gulp-clean:          清空文件夾
    gulp-livereload:     服務器控制客戶端同步刷新（需配合chrome插件LiveReload及tiny-lr）

Use Git as a project management tool
安裝git， 下載安裝包會安裝好 Git Shell 和可視化環(huán)境

    http://git-scm.com/download/win

配置用戶名：

    git config --global user.name "Your Name"
    git config --global user.email "email@example.com"

關聯(lián)一個到團隊的庫

    git remote add origin git@github.com:markyun/My-blog.git

添加文件到倉庫，添加全部文件用 . 表示

    git add .

把文件提交到倉庫

    git commit -m " first add project file"

提交文件到團隊倉庫

    git push -u origin master //將本地的項目提交到遠程倉庫中。

以上就完成了前端團隊最基本的開發(fā)環(huán)境搭建和代碼提交工作流程。

補充：ZSmart UED Team 的前端開發(fā)軟件環(huán)境 (Windows, Linux, Mac OS X)
    安裝Node.Js、NPM、Ruby、Java 基礎環(huán)境
    Sublime Text3 + 插件           用于編寫前端代碼
    Google chrome 、Mozilla Firefox + Firebug
    Internet Explorer             進行兼容測試和預覽頁面UI、動畫效果和交互功能
    Node.js+Gulp                 進行前端自動化構建、JS語法驗證、CSS壓縮，圖片壓縮等；
    Koala                         實時編譯Less、Sass、Compass、CoffeeScript;
    Github                         存儲自己的代碼庫 、git或SVN用于版本控制和團隊Code Review
    Tomcat、DedeAMPZ、MAMP      進行簡單運行環(huán)境演示
    Photoshop CC 切圖 + Sprites 合并小圖標
    XMind                         畫出清晰的工作或業(yè)務邏輯思維圖

（未完待續(xù)...）

最新評論