[英]how to use grunt-autoprefixer and grunt-sass together?
一般來說,我是剛開始使用粗鄙的工具和sass的人,這是一次很棒的學習經歷。 :)我目前已配置grunt,以在構建時合並/最小化我的SCSS。 我想使用grunt-autoprefixer插件添加供應商前綴,但是我不確定如何將其集成到現有的Gruntfile中。 在下面的代碼中,我已經開始實現它(請參閱注釋掉的“ TODO”部分),但是如果有人可以指出正確的方向來使其正常工作,將不勝感激:)
這是我當前的Gruntfile.js
:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
sourceMap: true
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/foundation.css': 'scss/foundation.scss'
}
}
},
copy: {
scripts: {
expand: true,
cwd: 'bower_components/foundation/js/vendor/',
src: '**',
flatten: 'true',
dest: 'js/vendor/'
},
iconfonts: {
expand: true,
cwd: 'bower_components/fontawesome/',
src: ['**', '!**/less/**', '!**/css/**', '!bower.json'],
dest: 'assets/fontawesome/'
},
},
// TODO: setup autoprefixer
// autoprefixer: {
// options: {
// // Task-specific options go here.
// browsers: ['last 2 versions', 'ie 8', 'ie 9']
// },
// your_target: {
// // Target-specific file lists and/or options go here.
// },
// },
'string-replace': {
fontawesome: {
files: {
'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss'
},
options: {
replacements: [
{
pattern: '../fonts',
replacement: '../assets/fontawesome/fonts'
}
]
}
},
},
concat: {
options: {
separator: ';',
},
dist: {
src: [
// Foundation core
'bower_components/foundation/js/foundation/foundation.js',
// Pick the componenets you need in your project
'bower_components/foundation/js/foundation/foundation.abide.js',
'bower_components/foundation/js/foundation/foundation.accordion.js',
'bower_components/foundation/js/foundation/foundation.alert.js',
'bower_components/foundation/js/foundation/foundation.clearing.js',
'bower_components/foundation/js/foundation/foundation.dropdown.js',
'bower_components/foundation/js/foundation/foundation.equalizer.js',
'bower_components/foundation/js/foundation/foundation.interchange.js',
'bower_components/foundation/js/foundation/foundation.joyride.js',
'bower_components/foundation/js/foundation/foundation.magellan.js',
'bower_components/foundation/js/foundation/foundation.offcanvas.js',
'bower_components/foundation/js/foundation/foundation.orbit.js',
'bower_components/foundation/js/foundation/foundation.reveal.js',
'bower_components/foundation/js/foundation/foundation.slider.js',
'bower_components/foundation/js/foundation/foundation.tab.js',
'bower_components/foundation/js/foundation/foundation.tooltip.js',
'bower_components/foundation/js/foundation/foundation.topbar.js',
'bower_components/alertify.js/lib/alertify.js',
// include vendor js
'js/vendor/jquery.unveil.js',
'js/vendor/wow.js',
// Using all of your custom js files
'js/custom/*.js'
],
// Concat all the files above into one single file
dest: 'js/foundation.js',
},
},
uglify: {
dist: {
files: {
// Shrink the file size by removing spaces
'js/foundation.js': ['js/foundation.js']
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-string-replace');
grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'concat', 'uglify']);
grunt.registerTask('default', ['watch']);
};
您應該對sass結果進行自動前綴,因此必須先運行sass
,然后再運行autoprefixer
。
假設您所有的CSS樣式都在css/foundation.css
:
autoprefixer:{
dist:{
files:{
'css/foundation.css':'css/foundation.css'
}
}
}
在您的build
任務中:
grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'autoprefixer' 'concat', 'uglify']);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.