我有一个 grunt 元素,我同时使用 sass 和 jade。我想在开发时为 sass 执行一项任务,在其中扩展样式以进行故障排除,并在我“完成”元素然后压缩样式时执行一项任务。我刚接触 grunt,不知道该怎么做。
我的 grunt 文件
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true,
nospawn: false
},
files: {
'index.html' : 'src/index.jade'
}
}
},
sass: {
dist: {
options: {
style: 'expanded',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
},
watch: {
jade: {
files: 'src/**/*.jade',
tasks: ['jade']
},
css: {
files: 'src/sass/**/*.sass',
tasks: ['sass']
},
options: {
livereload: true,
nospawn: false
}
},
connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect', 'watch']);
};
最佳答案
要获得压缩的 css 而不是展开,您首先需要创建另一个 sass 任务(在 sass:{} 内)
,例如将其命名为 finish:
并更改压缩设置。
它应该看起来像这样:
finish: {
options: {
style: 'compressed',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
然后 grunt.registerTask('default', ['connect', 'watch']);
你可以添加另一个任务,即完成它应该是这样的:
grunt.registerTask('finish', ['sass:finish']);
要运行它,您可以在命令行中键入 grunt finish
。
关于javascript - watch 和 sass 的不同 grunt 任务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36664289/