对于 现在的 vue 、 react 、webpack 来说也许有点旧了，有时候，越简单的技术越可靠，备份一下
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
development: {
options: {
generatedImagesDir:'public/src/slice',//合并后的雪碧图dir
imagesDir:'public/src/slice', //雪碧图合并前图片碎片dir
sassDir: 'public/src/sass',
cssDir: 'public/src/sass-css',
outputStyle:'compressed',//CSS output mode. Can be: nested, expanded, compact, compressed.
force:false
}
}
},
sprite: {
options: {
// sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
imagepath: 'public/src/slice/',
// 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
spritedest: 'public/src/css/',
// 替换后的背景路径，默认 ../images/
spritepath: 'img/',
// 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
padding: 2,
// 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
newsprite: false,
// 版本号 ver 未设置时，是否给雪碧图追加时间戳，默认不追加
spritestamp: true,
// 在CSS文件末尾追加时间戳，默认不追加
cssstamp: false,
// 默认使用二叉树最优排列算法
algorithm: 'binary-tree',
// 默认使用`pngsmith`图像处理引擎
engine: 'pngsmith',
//版本号
ver:new Date().toISOString().replace(/\D/g,'')
},
autoSprite: {
files: [{
expand: true,
cwd: 'public/src/sass-css/',
src: '**/*.css',
dest: 'public/src/css/',
ext: '.css'
}]
}
},
imagemin: {
dynamic: {
options: {
optimizationLevel: 3 // png图片优化水平，3是默认值，取值区间0-7
},
files: [
{
expand: true,
cwd: "public/src/css/img/", //只压缩 sprite产生的合并图片
src: "**/*.png",
dest: "public/src/css/img/"
}
]
}
},
clean: {
sassCss:{
src:["public/src/sass-css/*"]
},
css: {
src: ['public/src/css/*']
},
js:{
src:['public/dist/js/*']
}
},
copy: {
font: {
expand: true,
cwd: 'public/src/font',
src: '**',
dest: 'public/font'
},
css: {
expand: true,
cwd: 'public/src/css/',
src: '**',
dest: 'public/dist/css/'
}
},
babel: {
options: {
presets: ['env'],//the same as latest,including es2015，es2016，es2017 plugins
plugins: ["transform-es2015-modules-amd"],//import file translate to amd module
sourceMap: true
},
files: {
expand: true,
cwd: 'public/src/babel/es6/', //just a test now
src: ['**/*.js'],
dest: 'public/src/babel/es5/'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
sourceMap: true,
mangle: false, //不混淆变量名
comments: 'some' //保留 @preserve @license @cc_on等注释
},
build: {
files:[{
expand: true,
cwd: 'public/src/js',
src: '**/*.js',
dest: 'public/dist/js',
ext: '.js',
extDot: 'last'
}]
}
},
requirejs: {
build: {
options : {
optimize:'none', //指定压缩工具,none 不压缩
baseUrl : 'public/dist/js',//在压缩后的模块上进行文件合并
mainConfigFile: 'public/dist/js/require.config.js',
dir:"public/dist/js",//输出文件夹
keepBuildDir:true,//构建过程中勿删除重建dir文件夹
allowSourceOverwrites:true,//dir文件夹与源文件夹相同时允许重写构建前的文件
removeCombined: false,
findNestedDependencies:false,
optimizeCss:'none',
modules:[
{
/******
该合并后的模块几乎在每个页面都使用到,将作为公用模块，请确保该模块先于页面js文件引入，避免重复加载已合并的文件,
由于requirejs模块默认加载没有顺序，该模块置入 views/component/foot.ejs，少数未引用foot的页面请单独处理,
page/head.js 不是使用 require 的模块或其依赖引入,请声明为具名模块(define("page/head",[xxx,xxx],function(){}))以避免开发模式下模块未合并时报错
*********/
name:"page/head",
create: false
},
{
name:'ui/ui',
include:["ui/ux","ui/ejs","ui/tpl"],
exclude:["jquery","pin","request"],
create: false
},
{
name:'highstock',
include:["raphael","chart/maps/chinaMap"],
exclude:["jquery"],
create: false
},
{
name:"common/common",
include:["jquery","pin","request","common/common","common/gapageview"],
excludeShallow:["ui/ux","ui/ejs","ui/tpl"],
create: false
},
{
name:'page/analyze/analyze_report',
include:['page/analyze/report/step1','page/analyze/report/step2Major','page/analyze/report/step2Sch'],
exclude:["jquery","pin","request","ui/ux","ui/ejs","ui/tpl","common/common","page/head"],
create: false
},
{
name:'page/zhiyuan/zhiyuan',
include:["page/zhiyuan/list/selectArea","widget/page","common/fixBottom"],
exclude:["jquery","pin","request","ui/ux","ui/ejs","ui/tpl","common/common","page/head"],
create: false
}
]
}
}
},
watch: {
options: {
spawn:true,
interrupt:true,
debounceDelay: 250
},
sass:{
files: 'public/src/sass/**/*.scss',
tasks: [/*"clean:sassCss",*/"clean:css","compass","sprite"]
},
babel:{
files:'public/src/babel/es6/**/*.js',
tasks:['babel']
}
}
});
// 加载任务的插件
//css
//node-compass requires compass and ruby gem , install ruby then install compass via gem
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-cssprite');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
//js
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-requirejs');
//watch
grunt.loadNpmTasks('grunt-contrib-watch');
//开发期的编译任务
grunt.registerTask('default', [
"clean:sassCss",
"clean:css",
"compass",
"sprite",
"babel"
]);
//开发中监控,自动编译 (有点频繁 酌情开启)
grunt.registerTask('watcher',['watch']);
//压缩及发布
grunt.registerTask('dist',["imagemin","copy","clean:js","uglify","requirejs"]);
//test task
grunt.registerTask('test',[/*"clean:js","uglify",*/"requirejs"]);
}
package.json
"devDependencies": {
"grunt": "~0.4.5",
"grunt-babel": "^7.0.0",
"grunt-contrib-clean": "~0.4.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssprite": "~0.1.3",
"grunt-contrib-imagemin": "~2.0.1",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": "~1.0.0",
"grunt-contrib-compass": "~0.7.2"
}