Question

我正在尝试从gulp项目之外的目录访问.scss文件并将.css文件写入其中。我正在自定义一个名为UnderStrap的WordPress主题，该主题随gulpfile一起提供。

这可能是一个不寻常的设置，但是我试图创建2套css文件，一组用于父主题，一组用于子主题，以使主题彼此独立。

themes  
├─ theme-parent  
│    ├─ sass  
│    ├─ css  
│    └─ gulpfile.js  
│  
└─  theme-child  
    ├─ sass (trying to access the .scss files here)  
    └─ css (trying to write the .css files here)

这就是我的gulpfile中的内容。 gulp.watch似乎能够检测到项目外部文件的更改，但是gulp.src和gulp.dest无法正常工作。我查过基准并重命名，但它似乎也不起作用。只是不可能吗？

gulp.task('sass', function () {
    var stream = gulp.src('./sass/*.scss')
        .pipe(wait(500))
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sass())
        .pipe(gulp.dest('./css'))
        .pipe(rename('custom-editor-style.css'))
    return stream;
});

gulp.task('sass-child', function () {
    var stream = gulp.src('../theme-child/*.scss', {base: '.'})
        .pipe(wait(500))
        .pipe(plumber({
            errorHandler: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sass())
        .pipe(gulp.dest('../theme-child/css'))
        .pipe(rename('custom-editor-style.css'))
    return stream;
});

gulp.task('watch', function () {
    gulp.watch('./sass/**/*.scss', ['styles']);
    gulp.watch('../theme-child/_theme_child.scss', ['styles-child']);
    gulp.watch([basePaths.dev + 'js/**/*.js','js/**/*.js','!js/theme.js','!js/theme.min.js'], ['scripts']);
    gulp.watch('./img/**', ['imagemin'])
});

gulp.task('minify-css', function() {
    return gulp.src('./css/theme.css')
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(cleanCSS({compatibility: '*'}))
    .pipe(plumber({
        errorHandler: 
            function (err) {
                console.log(err);
                this.emit('end');
            }
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css/'));
});

gulp.task('minify-css-child', function() {
    return gulp.src('../theme-child/css/theme.css')
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(cleanCSS({compatibility: '*'}))
    .pipe(plumber({
        errorHandler: 
            function (err) {
                console.log(err);
                this.emit('end');
            }
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('../theme-child/css/'));
});

gulp.task('styles', function(callback){ gulpSequence('sass', 'minify-css')(callback) });
gulp.task('styles-child', function(callback){ gulpSequence('sass-child', 'minify-css-child')(callback) });

访问gulp项目之外的文件

0 个答案: