2016-04-25

grunt-contrib-less 与 grunt-autoprefixer 配置使用介绍

grunt-contrib-less 可以自动化实现将 LESS 文件编译成 CSS 文件。

安装:grunt-contrib-less

npm install grunt-contrib-less --save-dev

配置:grunt-contrib-less

  1. module.exports = function (grunt) {
  2.   grunt.initConfig({
  3.     less:{
  4.       page: {
  5.         options: {
  6.         //配置项
  7.         compress: true  //CSS 压缩
  8.         },
  9.         files: {
  10.           //目标文件,将 page.less 文件编译压缩后,生成 page.css 文件
  11.           'dist/css/page.css' : 'src/css/page.less'
  12.         }
  13.       }
  14.     }
  15.   });
  16.   //加载任务
  17.   grunt.loadNpmTasks('grunt-contrib-less');
  18.   //执行任务
  19.   grunt.registerTask('pageLess',['less:page']);
  20. };

详细介绍:grunt-contrib-less

npm

grunt-autoprefixer 处理 CSS 属性私有前缀,通过配置实现自动化添加 CSS 属性私有前缀。

安装:grunt-autoprefixer

npm install grunt-autoprefixer --save-dev

配置:grunt-autoprefixer

  1. module.exports = function (grunt) {
  2.   grunt.initConfig({
  3.     autoprefixer: {
  4.       options: {
  5.         //配置项
  6.         browsers: ['last 2 versions', 'ie 8', 'ie 9']  //浏览器兼容
  7.       },
  8.       css: {
  9.         //目标文件
  10.         src: [
  11.           'dist/css/page.css'  //将哪个 CSS 文件中的 CSS 属性添加私有前缀
  12.         ]
  13.       }
  14.     }
  15.   });
  16.   //加载任务
  17.   grunt.loadNpmTasks('grunt-autoprefixer');
  18.   //执行任务
  19.   grunt.registerTask('autoprefixerCss',['autoprefixer:css']);
  20. };

详细介绍:grunt-autoprefixer