使用nodeJS和Gulp任務運行器自動縮小

Question

我需要一些建議來改進節點和吞吐量的自動縮小。

主要目標是在開發模式下動態生成縮小文件（用於JS和LESS），並在生產模式下自動將正常文件（js和更少）改爲縮小文件。

該方案包含：

• 的NodeJS和ExpressJS路由和環境配置
• 玉作爲模板引擎
• 咕嘟咕嘟（任務運行）

這是我的設置：

GULP

我正在使用nodemon來啓動我的節點服務器的server.js。 在這個gulp文件中，我有一些任務（['watch']）用於觀察JS和LESS文件的變化，並在每次更改時縮小它們。

gulp.task('nodemon', function() { 
    nodemon({ script: 'server.js'}) 
     .on('start', ['watch']) 
     .on('change', ['watch']) 
}) 

NODE

在節點服務器I呈現其檢測開發或生產模式

var env= process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 

    app.get('/', function(req, res){ 
     res.render('index', {environment: env}); 
    }); 

JADE

在視圖注入的觀點和目的，將注入的對象進行比較，以便爲d添加正常的CSS和JS文件纔有發展模式或生產方式縮小的文件

if environment == "development" 
      link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.css') 
    else 
      link(rel='stylesheet', href='/vendor/bootstrap/dist/css/bootstrap.min.css') 

這是這樣做的正確方法？我需要檢查另一個選項嗎？每次將應用程序提交給服務器之前，我都希望避免手動縮小。所有建議將被接受，以改善這一點。

在服務器開發的時候更好地縮小吞吐量嗎？我如何用Azure做到這一點？

謝謝。

Answer 1

我發現了一個新的解決方案來做這個自動縮小。

通過上面我的問題的代碼，您可以在開發模式下生成所有縮小的文件以手動上傳到服務器。可以，但是，如果你做了一些改變的CSS/JS沒有激發了一口氣的任務來縮小，改變不會被縮小。

如果您使用Azure，我發現了一個新的解決方案。我的新解決方案使用KUDU（https://github.com/projectkudu/kudu）

Kudu是Azure網站中git部署的引擎，它也可以在Azure之外運行。 當您部署到Azure時，會有一個默認部署命令安裝node和package.json。

隨着Kudu，你可以創建一個自定義的部署命令，以啓動所有你想要的（吞噬縮小，咕嚕，測試等）。在這種情況下，我們將啓動一項縮小任務。

首先，在所有我們要在本地安裝Azure的CLI界面，創建Azure中的自定義部署腳本：

npm install -g azure-cli 

然後我們創建自定義命令

azure site deploymentscript --node 

這將增加以下文件到您的目錄：

• .deployment
• deploy.cmd

.deployment推出deploy.cmd（需要天藍）

如果檢查deploy.cmd你看到了安裝所需的所有軟件包。因此，對於在服務器啓動咕嚕我們需要添加這設置部分：

IF NOT DEFINED GULP_CMD (
    :: Install gulp 
    echo Installing Gulp 
    call npm --registry "http://registry.npmjs.org/" install gulp -g --silent 
    IF !ERRORLEVEL! NEQ 0 goto error 

    :: Locally just running "gulp" would also work 
    SET GULP_CMD="%appdata%\npm\gulp.cmd" 

) 

，並更改部署部分是這樣的：

:Deployment 
echo Handling node.js deployment. 

:: 1. Select node version 
call :SelectNodeVersion 

:: 2. Install npm packages 
IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
    pushd "%DEPLOYMENT_TARGET%" 
    call :ExecuteCmd !NPM_CMD! install 
    IF !ERRORLEVEL! NEQ 0 goto error 
    popd 
) 

:: 3. Install npm packages 
echo "Execute Gulp" 
IF EXIST "%DEPLOYMENT_TARGET%\gulpfile.js" (
    pushd "%DEPLOYMENT_TARGET%" 
    call :ExecuteCmd !GULP_CMD! YOUR_GULP_TASK_TO_EXECUTE 
    IF !ERRORLEVEL! NEQ 0 goto error 
) 

popd 

:: 4. KuduSync 
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
    call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd" 
    IF !ERRORLEVEL! NEQ 0 goto error 
) 

隨着湛藍這個自定義部署腳本，每次你做出部署（推你的分支到天青）gulp將啓動任務YOUR_GULP_TASK_TO_EXECUTE（在我的情況下「風格」發動縮小到無文件）

如果在部署腳本中會出現錯誤，我們網站的天藍色實現將失敗（檢查註冊表）。我建議在本地啓動deploy.cmd以查看如何在azure中工作，以及是否會崩潰。

您可以在每個實現中自定義此腳本以便啓動。

我希望它有幫助！

Answer 2

我通常是你想要什麼，以避免.. :)

在開發過程中我有一些觀察家誰是掉毛的JS文件，翻譯筆的CSS和玉石產生我的靜態html的諧音。他們的最後一步是使用美妙的gulp-inject插件來調用我的索引文件中的未定義資產。所有這些文件都放在構建文件夾中。

當我想測試我的生產環境我有一個DIST任務誰通吃目前資產build文件夾中會連接和它們最小化，應用REV爲後綴的名稱清除緩存，並一飲而盡，注入我將使用縮小的資產鏈接更新index.html文件。

在服務器中，我檢查環境並指示express（使用serve-static軟件包）相應地爲build或dist文件夾提供服務。

在Azure中創建您的網站時，您可以指定您的process.env.NODE_ENV值，因此您應該很好地在沒有運行時修改代碼的情況下進行操作。