Gulp - 从SCSS文件

时间:2017-03-28 12:27:40

标签: angular gulp gulp-sass gulp-concat

我正在使用Gulp编译scss,uglify和concat,当我尝试输出一个特定的文件时,它正在成功。

但我想要实现的是gulp将输出与SCSS文件相同的目录中的css文件。

例如

src
|
app
  |
  Folder1
     |
     style1.scss
     style1.css
  Folder2
     |
     style2.scss
     style2.css

我现在正在做的是如下gulp文件

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var sass = require("gulp-sass");
var debug = require("gulp-debug");

gulp.task('css', function () {
    gulp.src(
        "/*.scss"
    ).pipe(concat('styles.css'))
        pipe(sass().on('error', sass.logError))
        .pipe(debug({ title: 'unicorn:' }))
        .pipe(gulp.dest("./src"));
})

gulp.task('minify', ['css', 'default']);
gulp.task('default', function () {
    console.log("Default Task");
})

这在src目录中生成了CSS文件。但我需要不同的方法。

1 个答案:

答案 0 :(得分:0)

要在同一文件夹中生成输出文件,请在目的地位置提供相同位置 例子

gulp.task('css', function () {
  var component =  gulp.src('pattern-lab/source/_patterns/*/*/*/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cssimport())
    .pipe(autoprefixer())
    .pipe(gulp.dest('pattern-lab/source/_patterns'));
  return mergeStream(component);
});