之前的一篇文章：前端开发自动化：compass+grunt 里面实现的功能有这么几个。编译compass代码并压缩，js代码合并并压缩。今天看到一篇文章，发现前面的这篇文章里面使用了多余的Grunt插件了。其实要实现上面这两个功能，只需要三个插件而已。
- watch：观察项目中的HTML，SASS，JS代码变化
- Compass：编译sass和compass代码
- uglify：压缩并合并js代码
当然我们还可以添加一些附件的插件。例如：
- jshint:检查js代码错误（本案例中由于js代码简单，所以不用了，有需要可以参考上一篇文章配置）
- autoprefixer:CSS3代码自动补全，这个比compass自带的还要全，而且数据来自Can I Use，会自动去掉旧的浏览器的前缀。
下面给出具体的package.json和Gruntfile.js的代码。
package.json主要是安装grunt所需要的插件。
{
"name": "grunt-tutorial",
"version": "0.2.0",
"author": "jack cai(https://qdkfweb.cn)",
"devDependencies": {
"grunt": "latest",
"grunt-contrib-watch": "latest",
"grunt-contrib-compass": "latest",
"grunt-contrib-jshint": "latest",
"grunt-contrib-uglify": "~0.1.0",
"grunt-autoprefixer": "~0.7.2"
}
}
Gruntfile.js主要是grunt运行的脚本
module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //compass编译 compass: { dev: { options: { sassDir: ['styles/sass'], cssDir: ['styles/dev'], environment: 'development' } }, prod: { options: { sassDir: ['styles/sass'], cssDir: ['styles/prod'], environment: 'production' } }, }, autoprefixer: { options: { browsers: ['last 2 version', 'ie 8', 'ie 9','ie 10'] }, // prefix the specified file single_file: { src: 'styles/prod/style.css', dest: 'styles/dist/style.css' } }, uglify: { all: { files: { 'js/min/custom.min.js': [ 'js/libs/jquery.js', 'js/custom.js' ] } }, }, //grunt watch watch: { compass: { files: ['styles/sass/*.scss'], tasks: ['compass:prod', 'compass:dev'] }, autoprefixer: { files: 'styles/prod/*', tasks: ['autoprefixer'] }, js: { files: ['**/*.js'], tasks: ['uglify'] } } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask('default', ['compass', 'jshint', 'uglify']); // grunt.registerTask('default', ['jshint', 'concat', 'uglify']); grunt.registerTask('check', ['jshint']); };
另外Compass的sprite（CSS雪碧）还需要修改一下默认的config.rb文件
http_path = "/" css_dir = "styles/dev" sass_dir = "styles/sass" images_dir = "styles/images" http_generated_images_path = "../images" #增加了这一行图片相对sass的目录位置 javascripts_dir = "js"
希望这个教程对你有用。
