Automatic minification with nodeJS and Gulp task runner

Question

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.

Answer 1

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!

Answer 2

What i normally is exactly what you would like to avoid.. :)

During development i have some watchers who are linting js files, translating stylus to css and generating my static html partials from jade. Their final step is to use the wonderful gulp-inject plugin for putting a call to the unminified assets in my index file. All these files are put in the build folder.

When I want to test my production environment I have a dist task who takes all the assets present in the build folder concatenates and minify them, apply a rev suffix to the name for cache busting and with gulp-inject i'll update the index.html file with the minified assets links.

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

While creating your Web site in Azure you can specify your process.env.NODE_ENV value so you should be good to go with no runtime modifications to your code.