javascript - 如何在 sails.js 中使用 gruntfile.js 缩小所有 js 和 css 文件

Question

我对 sails 很陌生，不太了解 gruntjs 文件的使用。我有一个加载相当多的 js 和 css 文件的应用程序。我想将所有这些 js 文件缩小为 1-2 个缩小的 js 文件，将所有 css 文件缩小为 1 个缩小的 css 文件...

截至目前，我不知道该怎么做，我已经尝试实现这个 - How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)在我的 sailsjs 应用程序中，但在源代码中查看时没有打印缩小的 css 文件。

提前致谢。

这是 sails v0.9.16 的默认 gruntfile

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'
]);
};

Answer 1

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

这是做你想做的部分。 concat 会将 JS/CSS 文件连接成一个大文件。如您所见，每个子任务都有一个 src 和 dest。为了使其工作，您需要将 JS/CSS 文件的位置添加到 jsFilesToInject 和 cssFilesToInject 数组:

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

请注意，* 将匹配任何文件名，而 /**/ 将递归到文件结构中。

最后，请注意此 concat 任务仅在您运行 prod 任务时完成。因此，您需要执行 sails lift --prod 才能编译您的文件。

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'
]);