Question

我正在尝试使用postcss，CSS模块等设置样式的Gulp任务，但是现在只有主HTML文件的监视任务正常工作，甚至没有创建主要的CSS文件也没有临时文件夹所以我在控制台中得到错误，找不到styles.css。它让我疯狂了好几天但却无法深究它。这是我的文件结构，非常基本：

application -> views -> index.html

public -> gulp -> tasks -> styles.js, watch.js
       -> styles (styles.css inside, base and modules for CSS subfolders)

以下是样式和观察任务：

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    browserSync = require('browser-sync').create();

gulp.task('watch', function() {
    browserSync.init({
        notify: false,
        server: {
            baseDir: "../application/views"
        }
    });

    watch('../application/views/index.html', function(){
        browserSync.reload();
    });

    watch('../application/public/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

gulp.task('cssInject', ['styles'], function(){
    return gulp.src('../application/temp/styles')
        .pipe(browserSync.stream());
});

样式：

var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    cssvars = require('postcss-simple-vars'),
    nested = require('postcss-nested'),
    cssImport = require('postcss-import'),
    mixins = require('postcss-mixins'),
    hexrgba = require('postcss-hexrgba');

gulp.task('styles', function(){
    return gulp.src('../application/public/styles/styles.css')
        .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
        .on('error', function(errorInfo){
            console.log(errorInfo.toString());
            this.emit('end');
        })
        .pipe(gulp.dest('../application/temp/styles'));
});

如果有人可以提出建议，我将非常感激。

Gulp没有在目的地创建CSS文件

0 个答案: