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

Question

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

主要目标是在开发模式下动态生成缩小文件(对于JS和LESS),并在生产模式下自动将正常文件(js和更少)更改为缩小文件.

该方案包含:

• NodeJS和ExpressJS用于路由和环境配置
• 玉作为模板引擎
• Gulp(任务负责人)

这是我的设置:

GULP

我正在使用nodemon来启动我的节点服务器lauch 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')

这是正确的方法吗？我需要检查其他选项吗？我想在每次将应用程序提交到服务器之前避免手动缩小.所有建议都将被接受,以改善这一点.

服务器lauching gulp更好吗？我怎么能用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中工作以及它是否会崩溃.

您可以根据需要在每个单独的实现中自定义此脚本以进行启动.

我希望它有所帮助!