nodejs前端自動(dòng)化構(gòu)建環(huán)境的搭建

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

目前需要一些簡(jiǎn)單的功能：

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

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

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

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

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

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

Use Gulp to automate front-end build tasks

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

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

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

3、開始安裝Gulp

    npm install -g gulp


    全局安裝 gulp

    gulp -v


    得到gulp的版本號(hào)，確認(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功能模塊的文件會(huì)放在項(xiàng)目所在的目錄的./node_modules 下

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

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

 testProject (項(xiàng)目名稱)
 |–.git 通過git進(jìn)行版本控制,項(xiàng)目自動(dòng)生成這個(gè)文件
 |–node_modules 組件包目錄
 |–dist **發(fā)布環(huán)境**（編譯自動(dòng)生成的）
 |–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會(huì)安裝項(xiàng)目所有的依賴模塊，簡(jiǎn)化項(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會(huì)自動(dòng)執(zhí)行的任務(wù)
 gulp.task('default', function(){
 gulp.run('lint', 'sass', 'scripts');

 // 監(jiān)聽js文件變化，當(dāng)文件發(fā)生變化后會(huì)自動(dòng)執(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、編譯會(huì)顯示Finished,如果你的JS有什么不好的地方它會(huì)提醒，避免一些不必要的錯(cuò)誤，十分貼心

    常見提醒：

    1.禁止在同一行聲明多個(gè)變量。
    2.請(qǐng)使用 ===/!==來比較true/false或者數(shù)值
    3.使用對(duì)象字面量替代new Array這種形式
    4.不要使用全局函數(shù)。
    5.Switch語句必須帶有default分支
    6.函數(shù)不應(yīng)該有時(shí)候有返回值，有時(shí)候沒有返回值。
    7.For循環(huán)必須使用大括號(hào)
    8.If語句必須使用大括號(hào)
    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， 下載安裝包會(huì)安裝好 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ì)的庫(kù)

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

添加文件到倉(cāng)庫(kù)，添加全部文件用 . 表示

    git add .

把文件提交到倉(cāng)庫(kù)

    git commit -m " first add project file"

提交文件到團(tuán)隊(duì)倉(cāng)庫(kù)

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

以上就完成了前端團(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)行兼容測(cè)試和預(yù)覽頁面UI、動(dòng)畫效果和交互功能
    Node.js+Gulp                 進(jìn)行前端自動(dòng)化構(gòu)建、JS語法驗(yàn)證、CSS壓縮，圖片壓縮等；
    Koala                         實(shí)時(shí)編譯Less、Sass、Compass、CoffeeScript;
    Github                         存儲(chǔ)自己的代碼庫(kù) 、git或SVN用于版本控制和團(tuán)隊(duì)Code Review
    Tomcat、DedeAMPZ、MAMP      進(jìn)行簡(jiǎn)單運(yùn)行環(huán)境演示
    Photoshop CC 切圖 + Sprites 合并小圖標(biāo)
    XMind                         畫出清晰的工作或業(yè)務(wù)邏輯思維圖

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com