如何在sails.js中使用gruntfile.js来最小化所有的js和css文件
How to minified all js and css files using gruntfile.js in sails.js
我是一个航海新手，不知道如何使用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'
]);
};
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'
]);
相关文章：
- 全局窗口热键在最小化chrome窗口时调用js函数
- 最小化js时出现Gulp错误
- 最小化CSS/JS文件，并使用命令行创建一个文件
- 如何为大型组织的网站使用js最小化
- 最小化时删除了 js 全局变量
- 使用 JS 实现 HTML 最小化器插件
- js中数组的最小化代码
- 使用Joomla的JCH优化器最小化CSS和JS文件
- 在SVN窗口中最小化JS和CSS的步骤
- 如何在mvvm框架中使用敲除js最小化使用grunt的javascript文件
- 当每个页面引入一组不同的文件时，最小化/连接js/css文件.怎样
- 如何让JS代码在最小化或睡眠时在移动设备上运行
- 最小化/组合JS文件的最大大小
- System.Web.Optimization在最小化javascript时会改变js文件的顺序
- 如何在sails.js中使用gruntfile.js来最小化所有的js和css文件
- 移除Google闭包编译器对最小化js的警告
- 最小化WebStorm文件夹中所有带有闭包的js文件
- Angular控件在最小化JS文件后不起作用
- 如何避免在linemanjs中最小化JS文件
- 最小化bundle JS和外部库
