Question

我的Gulp脚本中有一个Less任务，但它不能正常工作：

1 它应该编译更少的文件并将它们移动到'build / css'文件夹。但由于某种原因，它不起作用。为什么呢？

2 我尝试使用gulp-util来记录错误。它在导入的较少文件中捕获错误的文件名。但是它没有检测到未定义的类。并没有说明为什么文件没有编译。

非常感谢任何提示！

gulpfile.js

var gulp           = require("gulp"),
    util           = require('gulp-util'),
    minifyHTML     = require("gulp-minify-html"),
    concat         = require("gulp-concat"),
    uglify         = require("gulp-uglify"),
    cssmin         = require("gulp-cssmin"),
    uncss          = require("gulp-uncss"),
    imagemin       = require("gulp-imagemin"),
    sourcemaps     = require("gulp-sourcemaps"),
    inject         = require("gulp-inject"),
    less           = require("gulp-less"),
    filter         = require("gulp-filter"),
    glob           = require("glob"),
    browserSync    = require("browser-sync"),
    LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    autoprefix     = new LessPluginAutoPrefix({
        browsers: ["last 2 versions"]
    });

var config = {
    paths: {
        html: {
            src:  "src/**/*.html",
            dest: "build"
        },
        javascript: {
            src:  ["src/js/**/*.js"],
            dest: "build/js"
        },
        css: {
            src: ["src/css/**/*.css"],
            dest: "build/css"
        },
        less: {
            src: ["src/less/**/*.less", "!src/less/includes/**"],
            dest: "build/css"
        },
        images: {
            src: ["src/images/**/*.jpg", "src/images/**/*.jpeg", "src/images/**/*.png"],
            dest: "build/images"
        },
        audio: {
            src: "src/audio/**/*.mp3",
            dest: "build/audio"
        }
    }
};

gulp.task("html", function(){
    return gulp.src(config.paths.html.src)
        .pipe(minifyHTML())
        .pipe(gulp.dest(config.paths.html.dest));
});

gulp.task("scripts", function(){
    return gulp.src(config.paths.javascript.src)
        .pipe(sourcemaps.init())
        .pipe(concat("app.min.js"))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.paths.javascript.dest));
});

gulp.task("css", function(){
    return gulp.src(config.paths.css.src)
        .pipe(sourcemaps.init())
        .pipe(cssmin())
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(config.paths.css.dest))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task("less", function(){
    return gulp.src(config.paths.less.src)
        .pipe(sourcemaps.init())
        .pipe(less({
            paths: ["node_modules/bootstrap/less"],
            plugins: [autoprefix]
        }))
        .pipe(uncss({
            html: glob.sync(config.paths.html.src)
        }))
        .pipe(concat("main.min.css"))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(config.paths.less.dest))
        .pipe(filter("**/*.css"))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task("images", function(){
    return gulp.src(config.paths.images.src)
        .pipe(imagemin({
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest(config.paths.images.dest));
});

gulp.task("audio", function() {
    return gulp.src([config.paths.audio.src]).pipe(gulp.dest(config.paths.audio.dest));
});

gulp.task("browser-sync", function() {
    browserSync({
        server: {
            baseDir: "./build"
        }
    });
});

gulp.task("build", ["html", "scripts", "css", "less", "images", "audio"]);

gulp.task("default", ["build", "browser-sync"], function(){
    gulp.watch(config.paths.html.src, ["html", browserSync.reload]);
    gulp.watch(config.paths.javascript.src, ["scripts", browserSync.reload]);
    gulp.watch(config.paths.css.src, ["css"]);
    gulp.watch(config.paths.less.src, ["less"]);
    gulp.watch(config.paths.images.src, ["images", browserSync.reload]);
    gulp.watch(config.paths.audio.src, ["audio", browserSync.reload]);
});

的package.json

{
  "name": "ofj-simon-says",
  "version": "0.1.0",
  "description": "Click a color sequence",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bower": "^1.3.12",
    "browser-sync": "^2.14.0",
    "glob": "^7.0.6",
    "gulp": "^3.8.10",
    "gulp-concat": "^2.4.1",
    "gulp-cssmin": "^0.1.6",
    "gulp-filter": "^4.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-inject": "^4.1.0",
    "gulp-less": "^3.1.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-sourcemaps": "^1.2.8",
    "gulp-uglify": "^2.0.0",
    "gulp-uncss": "^1.0.6",
    "gulp-util": "^3.0.7",
    "less-plugin-autoprefix": "^1.5.1",
    "main-bower-files": "^2.4.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7"
  }
}

Answer 1

似乎是gulp-uncss插件的问题。当我删除它，一切正常。我试图更新到最新版本1.0.6但无济于事。在说出问题所在之前，我必须更深入地研究它。现在我正在从较少的任务中删除uncss（）：

gulp.task("less", function(){
    return gulp.src(config.paths.less.src)
        .pipe(sourcemaps.init())
        .pipe(less({
            plugins: [autoprefix]
        }).on('error', util.log))
        .pipe(concat('main.min.css'))
        //.pipe(uncss({
        //    html: glob.sync(config.paths.html.src)
        //}))
        .pipe(nano())
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(config.paths.less.dest))
        .pipe(browserSync.reload({stream: true}));
});

Gulp Less任务没有做任何事情

1 个答案: