使用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值，因此您应该很好地在没有运行时修改代码的情况下进行操作。