使用nodeJS和Gulp任务运行器自动缩小 [英] Automatic minification with nodeJS and Gulp task runner
问题描述
主要目标是在开发模式下动态生成缩小文件（用于JS和LESS），以及
该方案包含：
这是我的设置：
GULP
我使用nodemon来启动我的节点服务器的server.js。
在这个gulp文件中，我有一些任务（['watch']）用于观察JS和LESS文件的变化，并在每次更改时将其缩小。
<$ （'start'，[pre $> $ $ $ $ $ $） ''watch']）
.on（'change'，['watch']）
}）
NODE
在节点服务器中，呈现视图注入和检测开发或生产模式的对象
var env = process.env.NODE_ENV = process.env.NODE_ENV || 发展;
app.get（'/'，function（req，res）{
res.render（'index'，{environment：env}）;
}）;
JADE
在视图中，将注入的对象进行比较，以便为开发模式添加正常的CSS和JS文件或为生产模式添加缩小的文件
如果environment ==development
link（rel ='stylesheet'，href ='/ vendor / bootstrap / dist / css / bootstrap.css'）
else
link rel ='stylesheet'，href ='/ vendor / bootstrap / dist / css / bootstrap.min.css'）
这是做这件事的正确方法吗？我需要检查另一个选项吗？每次将应用程序提交给服务器之前，我都希望避免手动缩小。所有的建议将被接受，以改善这一点。
在服务器开发的时候更好地缩小吞吐量吗？
谢谢。
我发现了一个新的解决方案来做这个自动缩小。
通过上面我的问题的代码，您可以在开发模式下生成所有缩小文件，服务器。如果你在css / js中做了一些改变而没有引发任务缩小，改变将不会被缩小。
我发现了一个新的解决方案如果您正在使用Azure。我的新解决方案使用KUDU（ https://github.com/projectkudu/kudu ）
Kudu是Azure网站中git部署的引擎，也可以在Azure之外运行。
当您部署到Azure时，会有一个默认部署命令来安装node和package.json。
使用Kudu，您可以按顺序创建自定义部署命令发射你想要的一切（咕咕咕咕咕咕咕咕咕咕咕咕咕咕，grunt，tests等）。在这种情况下，我们将启动一个缩小任务。
首先，我们将安装本地azure-cli，以便为Azure创建自定义部署脚本：
npm install -g azure-cli
然后我们创建自定义命令
azure站点deploymentscript --node
这会将以下文件添加到您的目录中：
- .deployment
- deploy.cmd
.deployment启动部署.cmd（azure需要）
如果您检查deploy.cmd，您会看到安装了所有需要的软件包。因此，对于服务器中的启动grunt，我们需要在安装部分中添加该代码：
IF NOT DEFINED GULP_CMD（
::安装gulp
echo安装gulp
调用npm --registryhttp://registry.npmjs.org/install gulp -g --silent
IF！ERRORLEVEL！NEQ 0 goto error
::本地只运行gulp也可以运行
SET GULP_CMD =％appdata％\\\
pm\gulp.cmd
）
并更改部署部分，如下所示：
：部署
echo处理node.js部署。
:: 1.选择节点版本
调用：SelectNodeVersion
:: 2.安装npm包
IF EXIST％DEPLOYMENT_TARGET％\package .json（
pushd％DEPLOYMENT_TARGET％
call：ExecuteCmd！NPM_CMD！install
IF！ERRORLEVEL！NEQ 0 goto error
popd
）
:: 3.安装npm包
echoExecute 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％NEQ1（
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转到错误
）
使用Azure的此自定义部署脚本，每次进行部署时（推你的分支到Azure）gulp将启动任务YOUR_GULP_TASK_TO_EXECUTE（在我的情况下，样式将启动缩小为无文件）
如果在部署过程中发生错误脚本，我们网站的天蓝色执行将失败（查看注册表）。我建议在本地启动deploy.cmd以查看在azure中是如何工作的，以及它是否会崩溃。
您可以自定义此脚本以便在每个实现中都可以启动。
我希望它有帮助！
I need some advices to improve automatic minification with node and gulp.
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.
The scenario contains:
- NodeJS and ExpressJS for routing and environment configuration
- Jade as template engine
- Gulp (task runner)
This is my setup:
GULP
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'])
})
NODE
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});
});
JADE
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.
Is better do minification at server lauching gulp? How i can do it with Azure?
Thank you.
I found a new solution to do this automatic minification.
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.
I found a new solution if you are working with Azure. My new solution uses KUDU (https://github.com/projectkudu/kudu)
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.
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.
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:
- .deployment
- deploy.cmd
.deployment launch deploy.cmd ( needed for azure )
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%\npm\gulp.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
)
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)
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.
I hope it helps!
这篇关于使用nodeJS和Gulp任务运行器自动缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
