logo标签列表

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

javascriptcssgruntjsnodessails.js
5
我对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'
]);
};
你能分享一下你的Gruntfile吗？ - Guy
你使用的Sails版本是什么？正如Guy所说，如果你发布你现有的gruntfile或者你的tasks/目录长成什么样子会更有帮助。 - Xinzz
嗨，感谢您的回复。我正在使用Sails版本0.9.16。 - Nina
使用Sails的默认gruntfile。这里是它（我只是把所有东西都复制到这里...）。 - Nina
1个回答
4
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' ];

请注意，*将匹配任何文件名，而/**/将递归地进入文件结构。
最后，请注意，只有在运行prod任务时才会执行此concat任务。因此，您需要执行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'
]);
你好，感谢你的回复。我尝试理解你的解释... 我已经成功将所有的js文件合并成一个，css也是如此。我可以看到合并后的文件。然而，当我尝试运行cssmin（registerTask）时，它没有生成production.css和production.js的压缩版本，并且在我的html源代码中也没有显示production.css/.js文件。 - Nina
将这两个文件注入到HTML源文件中是通过sails-linker完成的。查看该任务的src/dest。对于cssmin，确保你的src/dest匹配--因为通常这是错误的原因。 - Xinzz
你好，感谢你的帮助。现在它可以工作了 :) ... 我先修改了我的开发环境 :) - Nina
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接