javascript - Gulp 4 - CSS 缩小和重命名

标签 javascript css gulp gulp-minify

我缩小了 SASS 生成的 CSS。切换到 Gulp 4 后重命名和缩小 CSS 出现问题。

所有 gulp 插件都已正确安装。除了缩小和重命名 CSS 之外,一切正常。

这是我的代码:

const browserSync = require('browser-sync').create();
const run = require('gulp-run');
const del = require('del');
var gulp = require("gulp");
var rename = require("gulp-rename");
var log = require("fancy-log");

// Include paths file
//const paths = require('./src/paths');


/************************************ CSS ************************************/
gulp.task("css:compile", function () {
  var postcss = require("gulp-postcss");
  var sourcemaps = require("gulp-sourcemaps");
  var autoprefixer = require("autoprefixer");
  var sass = require("gulp-sass");

  return gulp
    .src("./src/scss/*.scss")
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        includePaths: ["node_modules/bootstrap/scss/"]
      }).on("error", sass.logError)
    )
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("./www/css/"));
});
gulp.task("css:minify", gulp.series(["css:compile"]), function () {
  var cleanCSS = require("gulp-clean-css");
  return gulp
    .src("./www/css/main.css")
    .pipe(cleanCSS())
    .pipe(rename("main.min.css"))
    .pipe(gulp.dest("./www/css/"));
});
gulp.task("img", function () {
  var imagemin = require("gulp-imagemin");
  return gulp.src("src/img/*")
    .pipe(imagemin())
    .pipe(gulp.dest("./www/img/"))
});
gulp.task("css", gulp.series(["css:minify"]));

最佳答案

在你的这两行代码中:

gulp.task("css:minify", gulp.series(["css:compile"]), function () {

gulp.task("css", gulp.series(["css:minify"]));

我认为 gulp.series 不能将数组作为第一个参数。将它们更改为:

gulp.task("css:minify", gulp.series("css:compile"), function () {

gulp.task("css", gulp.series("css:minify"));

关于javascript - Gulp 4 - CSS 缩小和重命名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55230117/

相关文章:

javascript - 在 Android 的 WebView 中通过 javascript 捕获页面重定向

javascript - 单击 <ion-col> 的事件在 IONIC 3 应用程序的 iOS 中不起作用

javascript - Webpack 工作流程有效地拆分 vendor 和应用程序代码

node.js - npm/gulp 获取大量未在 package.json 中定义的模块

javascript - 从某个类中查找值 (HTML)

javascript - React Native Element 类型无效,需要一个字符串,但未定义

html - 如何删除 Bootstrap 4 jumbotron 下的空白

html - 如何将图像与下方的标题水平并排对齐?

javascript - 如何自定义 Bootstrap 数据表搜索框和记录 View 位置

Gulp-minify-css 不生成输出文件