Question

我正在涉足Grunt。我正在尝试自动编写一个自动修复我的CSS的任务。

这是我的Gruntfile

module.exports = function(grunt) {
  'use strict';
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    autoprefixer: {
      options: {
        browsers: ['last 8 versions']
      },
      files: {
        'css/styles.css': 'css/styles.css'
      }
    },
    watch: {
      sass: {
        files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
        tasks: ['sass:dist', 'autoprefixer']
      },
      livereload: {
        files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
        options: {
          livereload: true
        }
      }
    },
    sass: {
      dist: {
        files: {
          'css/styles.css': 'sass/styles.scss'
        }
      }
    }
  });
  grunt.registerTask('default', ['sass:dist', 'autoprefixer', 'watch']);
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

当我运行grunt时，它说它正在运行任务正常但是当我检查css文件时，没有任何处理。

我错过了什么吗？（答案是肯定的，但我想知道:)）

Answer 1

我想为这个问题提供替代方案。接受的答案对于这个海报问题来说太过分了。 OP的问题是，autoprefixer任务在它应该转换的文件之前缺少目标，例如dist:。因此：

autoprefixer: {
  options: {
    browsers: ['last 8 versions']
  },
  files: {
    'css/styles.css': 'css/styles.css'
  }
},

应该是：

autoprefixer: {
  options: {
    browsers: ['last 8 versions']
  },
  dist: { // Target
    files: {
      'css/styles.css': 'css/styles.css'
    }
  }
},

Answer 2

livereload任务中的

watch对路径非常挑剔。看看我对this question的回答。

Grunt autoprefixer没有前缀

2 个答案: