[英]Different grunt tasks for watch and sass
我有一個 grunt 項目,我正在使用 sass 和 jade。 我想在開發時為 sass 設置一個任務,在其中擴展樣式以進行故障排除,以及在我“完成”項目然后壓縮樣式時的任務。 我是咕嚕聲的新手,不知道該怎么做。
我的 gruntfile
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-task(因此在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
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.