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

Question

我对sails很新,并且不太了解使用gruntjs文件.我有一个应用程序,加载了大量的js和css文件.我想将所有这些js文件缩小为1-2个缩小的js文件,并将所有css文件缩小为1个缩小的css文件...

截至目前,我不知道该怎么做,我试图实现这个 - 如何在我的sailsjs应用程序中使用Grunt.js(0.3.x)连接和缩小多个CSS和JavaScript文件,但是当没有打印缩小的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'
]);