grunt sass在同一目录中递归编译

grunt sass在同一目录中递归编译,sass,gruntjs,Sass,Gruntjs,我的所有SCS都在父文件夹下。/styles//etc中有更多文件夹,每个文件夹和子文件夹也包含scss文件。我想通过grunt任务编译所有内容。问题是我没有一个通用的css输出文件夹,所有编译的css文件都应该放在同一个源文件夹中。在咕噜声中我该怎么做。我遇到了这个 files: [ { expand: true, cwd: "styles",

我的所有SCS都在父文件夹下。/styles//etc中有更多文件夹,每个文件夹和子文件夹也包含scss文件。我想通过grunt任务编译所有内容。问题是我没有一个通用的css输出文件夹,所有编译的css文件都应该放在同一个源文件夹中。在咕噜声中我该怎么做。我遇到了这个

files: [
                {
                    expand: true,
                    cwd: "styles",
                    src: ["**/*.sass"],
                    dest: "styles",
                    ext: ".css"
                }
            ]

这行得通吗?

我在网上搜索,似乎咕噜可能不行。 所以我试着喝了一大口

1.创建一个Gulpfile.js

var gulp = require('gulp'),
sass = require('gulp-sass'),
sassPath = 'yourCssFolder/**/*.scss';

gulp.task('CompileSass', function() {
    gulp.src(sassPath)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

gulp.task('default', function () {
    gulp.watch(sassPath, ['CompileSass']);
});
2.创建一个包.json

{
  "version": "1.0.0",
  "name": "GulpSass",
  "private": true,
  "devDependencies": {
    "gulp": "*",
    "gulp-sass": "*"
  }
}
3.使用package.json安装依赖项,然后运行Gulp

(1) 打开与package.json文件夹相同的命令行

{
  "version": "1.0.0",
  "name": "GulpSass",
  "private": true,
  "devDependencies": {
    "gulp": "*",
    "gulp-sass": "*"
  }
}
(2) 运行npm安装

(3) 跑大口喝


这是整篇文章。请检查“自动Sass/Less编译””部分。

我能够通过此配置获得您所需的结果。所以是的这是可能的

sass: {
    dist: {
        files: [{
            expand: true,
            cwd: 'styles',
            src: ['**/*.scss'],
            dest: 'styles',
            ext: '.css'
        }]
    }
}