使用 nodeJS 和 Gulp 任务运行器自动缩小

Question

我需要一些建议来改进 node 和 gulp 的自动缩小。

主要目标是在开发模式下动态生成缩小文件（用于JS和LESS），并在生产模式下自动将普通文件（js和less）更改为缩小文件。

场景包含：

• NodeJS 和 ExpressJS 用于路由和环境配置
• Jade 作为模板引擎
• Gulp（任务运行器）

这是我的设置：

咕噜咕噜

我正在使用 nodemon 来启动 server.js 来启动我的节点服务器。 在这个 gulp 文件中，我有一些任务 (['watch']) 用于观察 JS 和 LESS 文件的更改，并在每次更改时缩小它们。

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

节点

在节点服务器中，我渲染视图注入和检测开发或生产模式的对象

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

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

翡翠

在视图中，比较注入的对象，以便为开发模式添加普通的 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')

这是正确的方法吗？我是否需要检查其他选项？我想在每次将应用程序提交到服务器之前避免手动缩小。为了改进这一点，我们将接受所有建议。

在服务器启动 gulp 时进行缩小是否更好？我如何使用 Azure 做到这一点？

谢谢。

Answer 1

我找到了一个新的解决方案来自动缩小。

使用上面我的问题的代码，您可以在开发模式下生成所有缩小文件以手动上传到服务器。可以，但是，如果您在 css/js 中进行一些更改而没有启动 gulp 任务来缩小，更改将不会被缩小。

如果您使用 Azure，我发现了一个新的解决方案。我的新解决方案使用 KUDU (https://github.com/projectkudu/kudu)

Kudu 是 Azure 网站中 git 部署背后的引擎，它也可以在 Azure 之外运行。 当你部署到 azure 时，有一个默认部署命令安装 node 和 package.json。

使用 Kudu，您可以创建自定义部署命令以启动您想要的所有内容（gulp 用于缩小、grunt、测试等）。在这种情况下，我们将启动一个 gulp 任务以进行缩小。

首先，我们要在本地安装 azure-cli 来为 Azure 创建自定义部署脚本：

npm install -g azure-cli

然后我们创建自定义命令

azure site deploymentscript --node

这会将以下文件添加到您的目录中：

• .部署
• deploy.cmd

.deployment 启动 deploy.cmd（天蓝色需要）

如果您检查 deploy.cmd，您会看到安装了所有需要的软件包。因此，为了在服务器中启动 grunt，我们需要在设置部分添加：

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
)

使用这个用于 azure 的自定义部署脚本，每次进行部署（将分支推送到 azure）时，gulp 都会启动任务 YOUR_GULP_TASK_TO_EXECUTE（在我的例子中是“样式”，用于启动压缩到 .less 文件）

如果在部署脚本期间发生错误，我们网站的 azure 实现将失败（检查注册表）。我建议在本地启动 deploy.cmd 以查看在 azure 中如何工作以及是否会崩溃。

您可以自定义此脚本以在每个实现中根据需要启动。

希望对你有帮助！

Answer 2

我通常正是你想要避免的...... :)

在开发过程中，我有一些观察者正在检查 js 文件、将手写笔转换为 css 并从玉生成我的静态 html 部分。他们的最后一步是使用美妙的 gulp-inject 插件来调用我的索引文件中的未缩小资产。所有这些文件都放在 build 文件夹中。

当我想测试我的生产环境时，我有一个 dist 任务，该任务将构建文件夹中存在的所有资产连接并缩小它们，将 rev 后缀应用于缓存破坏的名称并使用gulp-inject 我将使用缩小的资产链接更新 index.html 文件。

在服务器中，我检查环境并指示 express（使用 serve-static 包）相应地为 build 或 dist 文件夹提供服务。

在 Azure 中创建您的网站时，您可以指定您的 process.env.NODE_ENV 值，这样您就可以不用对代码进行运行时修改。