0

我用 Gulp 任务观看我的项目文件，这是我的项目结构

dist
|-- CSS folder
|-- images folder
|-- js folder
| index.html file
prod
|-- scss folder
    |-- layout
        |-- 13 scss files
        | main.scss file
|-- pug folder
    |-- layout
        |-- 6 pug files
        | main.pug file

我将 gulp 文件配置如下

// Vars Declare
var gulp = require("gulp"),
  sass = require("gulp-sass"),
  autoprefixer = require("gulp-autoprefixer"),
  pug = require("gulp-pug"),
  livereload = require("gulp-livereload"),
  sourcemaps = require("gulp-sourcemaps"),
  rename = require("gulp-rename"),
  plumber = require("gulp-plumber");

// HTML Task
gulp.task("pug", function () {
  return gulp.src("prod/pug/**/*.pug")
    .pipe(plumber())
    .pipe(pug({ pretty: true }))
    .pipe(rename("index.html"))
    .pipe(gulp.dest("dist"))
    .pipe(livereload());
});

// CSS Task
gulp.task("sass", function () {
  return gulp.src(["prod/sass/**/*.css", "prod/sass/**/*.scss"])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(rename("style.css"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/css"))
    .pipe(livereload());
});

// JS Task
gulp.task("js", function () {
  return gulp.src("prod/js/**/*.js")
    .pipe(plumber())
    .pipe(gulp.dest("dist/js"))
    .pipe(livereload());
});

// Watch Task
gulp.task('watch', function () {
  require('./server.js');
  livereload.listen();
  gulp.watch("prod/pug/**/*.pug", ['pug']);
  gulp.watch(["prod/sass/**/*.css", "prod/sass/**/*.scss"], ['sass']);
  gulp.watch("prod/js/**/*.js", ['js']);
});

// Default Task
gulp.task('default', ['watch']);

首要问题：

当我尝试保存 main.pug 文件时

doctype html
html(lang="en")
  include layout/head.pug
  body
    include layout/header.pug
    include layout/home.pug
    include layout/about.pug
    include layout/scroll-top.pug
    script(src="http://localhost:35729/livereload.js")

该任务仅编译第一张图片中的 scroll-top.pug 文件。

第一张有哈巴狗问题的照片

第二期

CSS 输出文件带有太多缩进，并且没有像第二张图片那样格式化。

第二张有scss问题的图片

4

0 回答 0