為了UED前端團(tuán)隊(duì)更好的協(xié)作開發(fā)同時(shí)提高項(xiàng)目編碼質(zhì)量，我們需要將Web前端使用工程化方式構(gòu)建；

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

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

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

目前最知名的構(gòu)建工具： Gulp、Grunt、NPM + Webpack；
    grunt是前端工程化的先驅(qū)

    gulp更自然基于流的方式連接任務(wù)

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

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

Use Gulp to automate front-end build tasks

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

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

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

3、開始安裝Gulp

    npm install -g gulp


    全局安裝 gulp

    gulp -v


    得到gulp的版本號，確認(rèn)安裝成功

基礎(chǔ)安裝結(jié)束
-

4、切換到你的在項(xiàng)目根文件夾下，運(yùn)行

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

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

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

gulp功能模塊的文件會放在項(xiàng)目所在的目錄的./node_modules 下

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

新建gulpfile.js 配置文件放在項(xiàng)目根目錄下
 演示項(xiàng)目目錄結(jié)構(gòu)

  testProject    (項(xiàng)目名稱)
  |–.git       通過git進(jìn)行版本控制,項(xiàng)目自動生成這個(gè)文件
  |–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文件,在項(xiàng)目目錄下npm install會安裝項(xiàng)目所有的依賴模塊，簡化項(xiàng)目的安裝程序

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

  // 引入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腳本的任務(wù)
  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');//自定義提醒信息
  });

  .... // 其他任務(wù)類似

  // 定義默認(rèn)任務(wù),執(zhí)行g(shù)ulp會自動執(zhí)行的任務(wù)
  gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

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

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

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

    gulp default

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

    gulp sass

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

    常見提醒：

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

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

    常用的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:     服務(wù)器控制客戶端同步刷新（需配合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"

關(guān)聯(lián)一個(gè)到團(tuán)隊(duì)的庫

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

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

    git add .

把文件提交到倉庫

    git commit -m " first add project file"

提交文件到團(tuán)隊(duì)倉庫

    git push -u origin master //將本地的項(xiàng)目提交到遠(yuǎn)程倉庫中。

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

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

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

最新評論