使用Grunt来编译compass并压缩js代码

之前的一篇文章:前端开发自动化:compass+grunt 里面实现的功能有这么几个。编译compass代码并压缩,js代码合并并压缩。今天看到一篇文章,发现前面的这篇文章里面使用了多余的Grunt插件了。其实要实现上面这两个功能,只需要三个插件而已。

  1. watch:观察项目中的HTML,SASS,JS代码变化
  2. Compass:编译sass和compass代码
  3. uglify:压缩并合并js代码

当然我们还可以添加一些附件的插件。例如:

  1. jshint:检查js代码错误(本案例中由于js代码简单,所以不用了,有需要可以参考上一篇文章配置)
  2. autoprefixer:css3代码自动补全,这个比compass自带的还要全,而且数据来自Can I Use,会自动去掉旧的浏览器的前缀。

下面给出具体的package.JSONGruntfile.js的代码。

package.json主要是安装grunt所需要的插件。

{
  "name": "grunt-tutorial",
  "version": "0.2.0",
  "author": "jack cai(http://caibaojian.com)",
  "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"

希望这个教程对你有用。

原创文章:使用Grunt来编译compass并压缩js代码 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/grunt-compass-tutorial-2.html)
评论已关闭。