All geek questions in one place

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

I am completely new to sails and don't know how much to use the gruntjs file. I have an application that downloads quite a lot of js and css files. I would like to minimize all these js files in 1-2 mini js files and all css files to 1 mini css file ...

Currently I don’t know what to do, I tried to implement this - How to combine and minimize multiple CSS and JavaScript files using Grunt.js (0.3.x) in my sailsjs application, but did not print a mini css file when viewed in source .

Thanks in advance.

Here's the default grunt file 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' ]); };
+5
source share
1 answer
 concat: { js: { src: jsFilesToInject, dest: '.tmp/public/concat/production.js' }, css: { src: cssFilesToInject, dest: '.tmp/public/concat/production.css' } },

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

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

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

Finally, note that this concat task concat runs when the prod task starts. So you need to do sails lift --prod so your files can 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' ]);
+4
source

Source: https://habr.com/ru/post/1200015/

More articles:


All Articles