使用 nodeJS 和 Gulp 任务运行器自动缩小 [英] Automatic minification with nodeJS and Gulp task runner

问题描述

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

I need some advices to improve automatic minification with node and gulp.

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

The main objective is generate dynamically the minified files(for JS and LESS) in development mode and change automatically normal files(js and less) to minified files in production mode.

场景包含:

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

这是我的设置:

咕噜咕噜

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

I'm using nodemon in order to lauch server.js wich starts my node server. In this gulp file i have some tasks (['watch']) for watch the changes on JS and LESS files and minify them in every single change.

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

节点

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

In node server I render the views injecting and object which detects the development or production mode

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

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

翡翠

在视图中，比较注入的对象，以便为开发模式添加普通的 CSS 和 JS 文件或为生产模式添加缩小文件

In the view, the injected object is compared in order to add normal CSS and JS files for development mode or minified files for production mode

 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')

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

Is this the correct way to do this? Should i need check for another options? I want to avoid manual minification before submit app to server every time. All advices would be accepted in order to improve this.

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

Is better do minification at server lauching gulp? How i can do it with Azure?

谢谢.

推荐答案

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

I found a new solution to do this automatic minification.

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

With the code of my question above, you can generate, in development mode, all minified files for upload manually to the server. Can be ok but, if you do some changes in css/js without having lauched the gulp task to minify, changes won't be minified.

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

I found a new solution if you are working with Azure. My new solution uses KUDU (https://github.com/projectkudu/kudu)

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

Kudu is the engine behind git deployments in Azure Web Sites and it can also run outside of Azure. When you deploy to azure, there is a default deployment command that install node and package.json.

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

With Kudu you can create a custom deployment command in order to launch all what you want(gulp for minification, grunt, tests, etc.). In this case we are going to launch a gulp task for minification.

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

First at all we are going to install locally azure-cli for create a custom deployment script for Azure:

npm install -g azure-cli

然后我们创建自定义命令

Then we create the custom command

azure site deploymentscript --node

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

This will add the following files to your directory:

• .部署
• 部署.cmd

.deployment 启动 deploy.cmd(天蓝色需要)

.deployment launch deploy.cmd ( needed for azure )

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

If you inspect deploy.cmd you see that install all packages needed. So for launch grunt in server we need to add this in setup section:

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%
pmgulp.cmd"

)

并像这样更改部署部分:

and change deployment section like this:

: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 文件)

With this custom deployment script for azure, every time you make a deployment (push your branch to azure) gulp will launch the task YOUR_GULP_TASK_TO_EXECUTE (in my case "styles" for launch minification to .less files)

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

If an error will be done during the deployment script, the azure implementation of our site will fail ( check registry ). I recommend to launch locally deploy.cmd to see how will work in azure and if it will crash.

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

You can customize this script for launch want you want in every single implementation.

希望对你有帮助！

这篇关于使用 nodeJS 和 Gulp 任务运行器自动缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！