CODEWITHSUNDEEP
node.jsnpmgulp
IggY
IggY

Reputation: 3125

npm/gulp/nodejs : Different files for production

I have a gulp script that concatenate and minify my JavaScript.

With the gulp-html-replace plugin I can replace all my JS dependancies by the concatened file in my index.html.

I end up with a dev version (/dev/index.html), with all the single JS files included (easier for debugging) and a production version,with all JS concatened (/prod/index.html).

For now I have a config flag (in NodeJS) in a config.js file and I do the following :

res.render(((config.build === 'prod') ? './prod' : './dev') + 'myPage')

But I'm not really happy with this solution as it adds a lot of code and it's easy to forget to write this code.

I am new to this npm/gulp/node workflow and not sure of what belongs where

Upvotes: 0

Views: 438

Answers (2)

AdityaParab
AdityaParab

Reputation: 7100

The way I like to do it is by maintaining two separate versions for index.html. index-development.html for dev environment and index-production.html for production environment.

The index-development.html includes all the scripts and css (non minified and concatenated) and index-production.html as minified and concatenated scripts and css links.

I construct index.html from gulp script.

By default the index-development.html will be deployed. If I specify parameter p to the gulp script, it will deploy index-production.html

No need to update the file path of the file to be served in your express router.

First do

npm install yargs

In gulp, I include

var argv = require('yargs').argv;

Check if parameter p (gulp -p) is passed to the gulp (p for production) with

var isProduction = argv.p;

and then,

if(isProduction){
    taskSequence = ['combineControllers','combineServices','productionsIndex','startServer'];
} else{
    taskSequence = ['developmentIndex','startServer'];
}


gulp.task('default', taskSequence);
gulp.task('startServer', function(){
    exec('npm start', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});
gulp.task('productionsIndex', function(done) {
    return gulp.src('./www/index-productions.html')
           .pipe(concat('index.html'))
           .pipe(gulp.dest('./public/'));
});

gulp.task('developmentIndex', function(done) {
    return gulp.src('./www/index-development.html')
           .pipe(concat('index.html'))
           .pipe(gulp.dest('./public/'));
});

This way, your index.html file will be constructed dynamically without having to change of the code in your express and you can serve it like

res.render('index');

if you want to user myPage.html everywhere, just replace index.html and index in the code above with myPage.html and myPage.

EDIT:

To start your application in development environment, simply run gulp

To start your application in production environment, simply run gulp -p

Simple!

Upvotes: 1

Safari
Safari

Reputation: 3382

in your app initialization process you can set the path of your views.

app.set('views', process.cwd() + ((config.build === 'prod') ? '/prod' : '/dev'));

Now you can call the render function like this:

res.render('myPage');

Upvotes: 1

Related Questions