How to minified all js and css files using gruntfile.js in sails.js

Question

I'm quite new to sails and doesnt know much of using the gruntjs file. I've an application that loads quite a number of js and css files. I would like to minified all these js files into 1-2 minified js files, and all css files to 1 minified css file...

As of now, I dont know what to do, I've tried to implement this - How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) in my sailsjs application but didnt print the minified css file when viewed in sourcecodes.

Thanks in advance.

Here's the default gruntfile for sails v0.9.16

module.exports = function (grunt) {
 var cssFilesToInject = [ 'linker/**/*.css' ];
 var jsFilesToInject = [ 'linker/**/*.js' ];
 var templateFilesToInject = [ 'linker/**/*.html' ];
cssFilesToInject = cssFilesToInject.map(function (path) {
  return '.tmp/public/' + path;
});
jsFilesToInject = jsFilesToInject.map(function (path) {
  return '.tmp/public/' + path;
});
templateFilesToInject = templateFilesToInject.map(function (path) {
  return 'assets/' + path;
});

var depsPath = grunt.option('gdsrc') || 'node_modules/sails/node_modules';
 grunt.loadTasks(depsPath + '/grunt-contrib-clean/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-copy/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-concat/tasks');
 grunt.loadTasks(depsPath + '/grunt-sails-linker/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-jst/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-watch/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-uglify/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-cssmin/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-less/tasks');
 grunt.loadTasks(depsPath + '/grunt-contrib-coffee/tasks');

 grunt.initConfig({
 pkg: grunt.file.readJSON('package.json'),
copy: {
  dev: {
    files: [
      {
      expand: true,
      cwd: './assets',
      src: ['**/*.!(coffee)'],
      dest: '.tmp/public'
    }
    ]
  },
  build: {
    files: [
      {
      expand: true,
      cwd: '.tmp/public',
      src: ['**/*'],
      dest: 'www'
    }
    ]
  }
},

clean: {
  dev: ['.tmp/public/**'],
  build: ['www']
},

jst: {
  dev: {
    files: {
      '.tmp/public/jst.js': templateFilesToInject
    }
  }
},

less: {
  dev: {
    files: [
      {
      expand: true,
      cwd: 'assets/styles/',
      src: ['*.less'],
      dest: '.tmp/public/styles/',
      ext: '.css'
    }, {
      expand: true,
      cwd: 'assets/linker/styles/',
      src: ['*.less'],
      dest: '.tmp/public/linker/styles/',
      ext: '.css'
    }
    ]
  }
},

coffee: {
  dev: {
    options:{
      bare:true
    },
    files: [
      {
        expand: true,
        cwd: 'assets/js/',
        src: ['**/*.coffee'],
        dest: '.tmp/public/js/',
        ext: '.js'
      }, {
        expand: true,
        cwd: 'assets/linker/js/',
        src: ['**/*.coffee'],
        dest: '.tmp/public/linker/js/',
        ext: '.js'
      }
    ]
  }
},

concat: {
  js: {
    src: jsFilesToInject,
    dest: '.tmp/public/concat/production.js'
  },
  css: {
    src: cssFilesToInject,
    dest: '.tmp/public/concat/production.css'
  }
},

uglify: {
  dist: {
    src: ['.tmp/public/concat/production.js'],
    dest: '.tmp/public/min/production.js'
  }
},

cssmin: {
  dist: {
    src: ['.tmp/public/concat/production.css'],
    dest: '.tmp/public/min/production.css'
  }
},

'sails-linker': {

  devJs: {
    options: {
      startTag: '<!--SCRIPTS-->',
      endTag: '<!--SCRIPTS END-->',
      fileTmpl: '<script src="%s"></script>',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/**/*.html': jsFilesToInject,
      'views/**/*.html': jsFilesToInject,
      'views/**/*.ejs': jsFilesToInject
    }
  },

  prodJs: {
    options: {
      startTag: '<!--SCRIPTS-->',
      endTag: '<!--SCRIPTS END-->',
      fileTmpl: '<script src="%s"></script>',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/**/*.html': ['.tmp/public/min/production.js'],
      'views/**/*.html': ['.tmp/public/min/production.js'],
      'views/**/*.ejs': ['.tmp/public/min/production.js']
    }
  },

  devStyles: {
    options: {
      startTag: '<!--STYLES-->',
      endTag: '<!--STYLES END-->',
      fileTmpl: '<link rel="stylesheet" href="%s">',
      appRoot: '.tmp/public'
    },

    files: {
      '.tmp/public/**/*.html': cssFilesToInject,
      'views/**/*.html': cssFilesToInject,
      'views/**/*.ejs': cssFilesToInject
    }
  },

  prodStyles: {
    options: {
      startTag: '<!--STYLES-->',
      endTag: '<!--STYLES END-->',
      fileTmpl: '<link rel="stylesheet" href="%s">',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/index.html': ['.tmp/public/min/production.css'],
      'views/**/*.html': ['.tmp/public/min/production.css'],
      'views/**/*.ejs': ['.tmp/public/min/production.css']
    }
  },

  // Bring in JST template object
  devTpl: {
    options: {
      startTag: '<!--TEMPLATES-->',
      endTag: '<!--TEMPLATES END-->',
      fileTmpl: '<script type="text/javascript" src="%s"></script>',
      appRoot: '.tmp/public'
    },
    files: {
      '.tmp/public/index.html': ['.tmp/public/jst.js'],
      'views/**/*.html': ['.tmp/public/jst.js'],
      'views/**/*.ejs': ['.tmp/public/jst.js']
    }
  },
  devJsJADE: {
    options: {
      startTag: '// SCRIPTS',
      endTag: '// SCRIPTS END',
      fileTmpl: 'script(type="text/javascript", src="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': jsFilesToInject
    }
  },

  prodJsJADE: {
    options: {
      startTag: '// SCRIPTS',
      endTag: '// SCRIPTS END',
      fileTmpl: 'script(type="text/javascript", src="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': ['.tmp/public/min/production.js']
    }
  },

  devStylesJADE: {
    options: {
      startTag: '// STYLES',
      endTag: '// STYLES END',
      fileTmpl: 'link(rel="stylesheet", href="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': cssFilesToInject
    }
  },

  prodStylesJADE: {
    options: {
      startTag: '// STYLES',
      endTag: '// STYLES END',
      fileTmpl: 'link(rel="stylesheet", href="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': ['.tmp/public/min/production.css']
    }
  },
  devTplJADE: {
    options: {
      startTag: '// TEMPLATES',
      endTag: '// TEMPLATES END',
      fileTmpl: 'script(type="text/javascript", src="%s")',
      appRoot: '.tmp/public'
    },
    files: {
      'views/**/*.jade': ['.tmp/public/jst.js']
    }
  }
},

watch: {
  api: {

    // API files to watch:
    files: ['api/**/*']
  },
  assets: {
    files: ['assets/**/*'],
    tasks: ['compileAssets', 'linkAssets']
  }
}
});

 grunt.registerTask('default', [
 'compileAssets',
 'linkAssets',
 'watch'
]);

grunt.registerTask('compileAssets', [
 'clean:dev',
 'jst:dev',
 'less:dev',
 'copy:dev',    
 'coffee:dev'
]);

grunt.registerTask('linkAssets', [
'sails-linker:devJs',
'sails-linker:devStyles',
'sails-linker:devTpl',
'sails-linker:devJsJADE',
'sails-linker:devStylesJADE',
'sails-linker:devTplJADE'
]);
grunt.registerTask('build', [
'compileAssets',
'linkAssets',
'clean:build',
'copy:build'
]);
grunt.registerTask('prod', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
'sails-linker:devTpl',
'sails-linker:prodJsJADE',
'sails-linker:prodStylesJADE',
'sails-linker:devTplJADE'
]);
};

What version of sails are you using? As guy said, it would help if you posted your existing gruntfile or what your tasks/ directory looks like. — Xinzz, Aug 11 '14 at 13:52
and using the sails' default gruntfile. here it is (i just copied everything here...) — Nina, Aug 12 '14 at 01:53

score 4 · Accepted Answer · answered Aug 12 '14 at 03:09

concat: {
  js: {
    src: jsFilesToInject,
    dest: '.tmp/public/concat/production.js'
  },
  css: {
    src: cssFilesToInject,
    dest: '.tmp/public/concat/production.css'
  }
},

This is the portion that does what you want. concat will concatenate JS/CSS files into one huge file each. As you see, there is a src and dest for each of the subtasks. In order for this to work, you need to add the locations of your JS/CSS files to the jsFilesToInject and cssFilesToInject arrays:

 var cssFilesToInject = [ 'linker/**/*.css' ];
 var jsFilesToInject = [ 'linker/**/*.js' ];

Note that * will match any filename, while /**/ will go recursively down the file structure.

Finally, notice that this concat task is only done when you run the prod task. Thus, you will need to execute sails lift --prod in order for your files to compile.

grunt.registerTask('prod', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
'sails-linker:devTpl',
'sails-linker:prodJsJADE',
'sails-linker:prodStylesJADE',
'sails-linker:devTplJADE'
]);

Hello thanks for your input, I tried to understand your explanation... I have managed to concat all js files into 1, same with css. I can see the concatenated files. However, when I tried to run cssmin (registerTask) it doesnt generate the minified version of production.css and production.js and it doesnt show the production.css/.js files into my html source codes. — Nina, Aug 12 '14 at 04:53
injecting the two files into html source files is done by `sails-linker`. Check out the src/dest for that task. For `cssmin`, make sure that your src/dest matches up -- as that is usually the error. — Xinzz, Aug 12 '14 at 04:58
Hello thank you for help. It works now :)... I modified my dev first :) — Nina, Aug 12 '14 at 06:06

How to minified all js and css files using gruntfile.js in sails.js

1 Answers1