我的代码当前监视我的sass文件并将样式输出到css文件夹。但是它正在做的是基于sass文件创建所有css文件,我只希望它创建一个main.css文件。到目前为止,我的代码是:
var gulp = require('gulp'),
sass = require('gulp-sass'),
livereload = require('gulp-livereload');
watchSass = require("gulp-watch-sass"),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
$ = require('gulp-load-plugins')({ lazy: true });
gulp.task('sass', function () {
return gulp.src('./src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css/'))
.pipe(livereload());
});
gulp.task("sass:watch", function () {
livereload.listen();
gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
});
有什么想法吗?
我尝试以下操作均无济于事:
gulp.task('sass', function () {
return gulp.src('./src/sass/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(livereload())
.pipe(gulp.dest('./public/css/'))
});
gulp.task("sass:watch", function () {
livereload.listen();
gulp.watch('./src/sass/main.scss', gulp.series('sass'))
});
答案 0 :(得分:1)
这是我的一个gulp文件的构建CSS函数的示例:
const autoprefixer = require("autoprefixer");
const gulp = require("gulp");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const postcss = require("gulp-postcss");
const uglify = require("gulp-uglify");
const cssnano = require("cssnano");
// CSS: Build & Minify Css
function css() {
return gulp
.src("./scss/app.scss")
.pipe(plumber())
.pipe(sass({ outputStyle: "expanded" }))
.pipe(gulp.dest("./css/"))
.pipe(rename({ suffix: ".min" }))
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(gulp.dest("./css/"))
}
这是我的app.scss的一部分:
// VARIABLES
@import 'variables.scss';
@import 'colors.scss';
// LAYOUT
@import 'layout/layout.scss';
@import 'layout/header.scss';
我要构建时运行:
gulp css
但是您始终可以在手表上触发此功能