我正在涉足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文件时,没有任何处理。
我错过了什么吗? (答案是肯定的,但我想知道:))
答案 0 :(得分:8)
我想为这个问题提供替代方案。接受的答案对于这个海报问题来说太过分了。 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'
}
}
},
答案 1 :(得分:0)
livereload
任务中的 watch
对路径非常挑剔。看看我对this question的回答。