如何让 grunt-sass 递归处理整个目录?
how to get grunt-sass to process a whole directory, recursively?
我无法将 g运行t-sass 任务分配给 运行,因为我想使用这样的配置:
sass: {
options: {
outputStyle: 'compressed'
},
dist: {
src: 'src/client/**/*.scss',
dest: 'src/client/**/*.css'
}
}
它似乎没有响应通配符选择器我只有指定完整的文件名才能让它工作,所以我写了自己的任务函数,但我不知道如何调用g运行t-sass 从我的函数中使用适当的参数?
function compileSass(path){
var fs = require('fs'),
sass = require('node-sass'),
compileSassFile = function(path){
grunt.log.writeln('compile file: '+path);
// how to call grunt-sass here with options {outputStyle: 'compressed'} and dist {src: path: dest: path.replace('.scss', '.css')} ?
},
processDir = function(path){
var files = fs.readdirSync(path);
for(var i = 0; i < files.length; i++){
var fileName = files[i];
if(fs.statSync(path + '/' + fileName).isDirectory()){
processDir(path + '/' + fileName);
} else if(fileName.indexOf('.scss') > 0 && fileName.indexOf('_') !== 0){
compileSassFile(path + '/' + fileName)
}
}
};
processDir(path);
}
grunt.registerTask('buildSass', function(){compileSass('src/client')});
Grunt Files值得一读。它为您提供了很大的灵活性,可以让您灵活地决定您的任务将 运行 针对哪些文件以及它将如何处理输出。
您的 G运行t 任务应如下所示:
sass: {
options: {
outputStyle: 'compressed'
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "src/client", // The startup directory
src: ["**/*.scss"], // Source files
dest: "src/client", // Destination
ext: ".css" // File extension
}
]
}
}
Colin Bacons 更直接地回答了问题,但我实际上最终采用的另一种方法是根本不使用 grunt-sass 而是使用 grunt-exec 并添加node-sass 直接进入我自己的 package.json 文件,然后我只是 运行 node-sass 直接从终端使用 grunt-exec:
exec: {
compileDevSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -r -o src/client src/client"
},
compileBuildSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -r -o build/client build/client"
},
watchDevSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -w -r -o src/client src/client"
}
}
grunt.registerTask("watchSass", ["exec:compileDevSass", "exec:watchDevSass"])
我无法将 g运行t-sass 任务分配给 运行,因为我想使用这样的配置:
sass: {
options: {
outputStyle: 'compressed'
},
dist: {
src: 'src/client/**/*.scss',
dest: 'src/client/**/*.css'
}
}
它似乎没有响应通配符选择器我只有指定完整的文件名才能让它工作,所以我写了自己的任务函数,但我不知道如何调用g运行t-sass 从我的函数中使用适当的参数?
function compileSass(path){
var fs = require('fs'),
sass = require('node-sass'),
compileSassFile = function(path){
grunt.log.writeln('compile file: '+path);
// how to call grunt-sass here with options {outputStyle: 'compressed'} and dist {src: path: dest: path.replace('.scss', '.css')} ?
},
processDir = function(path){
var files = fs.readdirSync(path);
for(var i = 0; i < files.length; i++){
var fileName = files[i];
if(fs.statSync(path + '/' + fileName).isDirectory()){
processDir(path + '/' + fileName);
} else if(fileName.indexOf('.scss') > 0 && fileName.indexOf('_') !== 0){
compileSassFile(path + '/' + fileName)
}
}
};
processDir(path);
}
grunt.registerTask('buildSass', function(){compileSass('src/client')});
Grunt Files值得一读。它为您提供了很大的灵活性,可以让您灵活地决定您的任务将 运行 针对哪些文件以及它将如何处理输出。
您的 G运行t 任务应如下所示:
sass: {
options: {
outputStyle: 'compressed'
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "src/client", // The startup directory
src: ["**/*.scss"], // Source files
dest: "src/client", // Destination
ext: ".css" // File extension
}
]
}
}
Colin Bacons 更直接地回答了问题,但我实际上最终采用的另一种方法是根本不使用 grunt-sass 而是使用 grunt-exec 并添加node-sass 直接进入我自己的 package.json 文件,然后我只是 运行 node-sass 直接从终端使用 grunt-exec:
exec: {
compileDevSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -r -o src/client src/client"
},
compileBuildSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -r -o build/client build/client"
},
watchDevSass: {
cmd: "node node_modules/node-sass/bin/node-sass --output-style compressed -w -r -o src/client src/client"
}
}
grunt.registerTask("watchSass", ["exec:compileDevSass", "exec:watchDevSass"])