Automatic minification using nodeJS and Gulp

Question

I need tips to improve auto-mini programming with node and gulp.

The main task is to generate dynamically reduced files (for JS and LESS) in development mode and automatically change normal files (js and less) to mini files in working mode.

The script contains:

• NodeJS and ExpressJS to configure routing and environment configuration
• Jade as an engine template
• Gulp (task runner)

This is my setup:

Gulp

I use nodemon so that lauch server.js starts my node server. In this gulp file, I have some tasks (['watch']) for viewing changes in JS and LESS files and minimizing them with every change.

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

NODE

In the node server, I visualize input objects and objects that determine the design 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 indexed object is compared to add regular 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 right way to do this? Should I check other options? I want to avoid redirecting manually before sending applications to the server every time. All tips will be taken to improve this.

Better to do minifixation on luching gulp server? How can I do this with Azure?

Thanks.

Answer 1

I found a new solution for this automatic reduction.

With the code of my question above, you can create in development mode all minified files for manual upload to the server. It may be nice, but if you make some changes to css / js without calculating the gulp task to minimize, the changes will not be reduced.

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 for deploying git on Azure Web Sites and can also run outside of Azure. When deploying to azure, there is a default deployment command that installs node and package.json.

With Kudu, you can create a custom deployment team to run whatever you want (gulp to minimize, grunt, tests, etc.). In this case, we are going to run the gulp task to minimize it.

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

 npm install -g azure-cli 

Then we create a custom command

 azure site deploymentscript --node 

This will add the following files to your directory:

• .deployment
• deploy.cmd

. deployment deployment deploy.cmd (required for azure)

If you check deploy.cmd, you will see that install all the necessary packages. So, to run grunt on the server, we need to add this to the settings 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 the deployment section as follows:

 :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 do a deployment (click your branch on azure) gulp will run the YOUR_GULP_TASK_TO_EXECUTE task (in my case, the "styles" for the thumbnail to run into .less files)

If an error occurs during the deployment of the script, the azure implementation of our site will fail (check the registry). I recommend running locally deploy.cmd to see how it works in blue and if it works.

You can configure this script to run, which you want in each individual implementation.

Hope this helps!

Answer 2

That I, as a rule, is exactly what you would like to avoid. :)

During development, I have some observers that iterate over js files, translate the stylus into css and generate my static html parts from jade. Their last step is to use the wonderful gulp -inject plugin to put a call to un-mined assets into my index file. All these files are placed in the build folder.

When I want to test my production environment, I have a dist task that takes all the assets present in the assembly folder, concatenates and minimizes them, applies the rev suffix to the name to iterate over the cache, and with gulp -inject I update the index.html file with links to useful links.

On the server, I check the environment and instruct the express (with the service-static package) to serve the build or dist folders accordingly.

When creating your website in Azure, you can specify the value of process.env.NODE_ENV, so you should be fine if you do not make changes to your code.