Question

我需要一些建议来改善节点和gulp的自动缩小。

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

该方案包含：

用于路由和环境配置的NodeJS和ExpressJS
Jade作为模板引擎
Gulp（任务负责人）

这是我的设置：

GULP

我正在使用nodemon来启动我的节点服务器。在这个gulp文件中，我有一些任务（[＆＃39; watch＆＃39;]）用于观察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});
    });

JADE

在视图中，比较注入的对象，以便为开发模式添加普通的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进行了一些更改而没有推动gulp任务缩小，那么更改将不会缩小。

如果您正在使用Azure，我找到了一个新的解决方案。我的新解决方案使用KUDU（https://github.com/projectkudu/kudu）

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

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

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

npm install -g azure-cli

然后我们创建自定义命令

azure site deploymentscript --node

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

.deployment
deploy.cmd

.deployment启动deploy.cmd（azure需要）

如果您检查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

我通常正是你想要避免的......：）

在开发期间，我有一些观察者正在使用ls文件，将手写笔转换为css并从jade生成我的静态html部分。他们的最后一步是使用精彩的gulp-inject插件来调用我的索引文件中的未分类资产。所有这些文件都放在构建文件夹中。

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

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

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

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

2 个答案: