0

I'm working on a process similar to the one described in https://nystudio107.com/blog/a-better-package-json-for-the-frontend but want to modify it to be able to compile different SCSS files to CSS files of the same name, e.g. fileA.scss compiles to fileA.css.

What I have at the moment works fine if I'm just working with one SCSS file master.scss compiling to site.combined.min.css.

From package.json

"paths": {
    "src": {
        "base": "./src/",
        "css": "",
        "img": "./src/img/",
        "js": "./src/js/",
        "scss": "./src/scss/"
    },
    "dist": {
        "base": "./public/",
        "css": "./public/assets/css/",
        "js": "./public/assets/js/",
        "fonts": "./public/assets/fonts/",
        "img": "./public/assets/img/"
    },
    "build": {
        "base": "./build/",
        "css": "./build/css/",
        "js": "./build/js/",
        "html": "./build/html/",
        "img": "./build/img/"
    },
    "tailwindcss": {
        "src": "./build/css/master.css",
        "conf": "./tailwind.config.js"
    },
    "scss": [
        {
            "src": "./src/scss/master.scss"
        }
    ],
    "templates": "./public/site/templates/"
},
"vars": {
    "siteCssName": "site.combined.min.css",
    "scssName": "master.scss",
    "cssName": "master.css"
},
"globs": {
    "distCss": [
        "./node_modules/normalize.css/normalize.css",
        "./build/css/*.css"
    ],
    "purgecss": [
        "./html/index.html",
        "./html/site/templates/**/*.{twig}",
        "./src/js/site.js",
        "./html/assets/js/*.js"
    ],
    "purgecssWhitelist": []
},

And the Gulp tasks

gulp.task("scss", () => {
    $.fancyLog("-> Compiling scss");
    // return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
    return gulp.src(pkg.paths.src.scss + '*.scss')
        .pipe($.plumber({errorHandler: onError}))
        .pipe($.sourcemaps.init({loadMaps: true}))
        .pipe($.sass({
                includePaths: pkg.paths.scss
            })
            .on("error", $.sass.logError))
        .pipe($.cached("sass_compile"))
        .pipe($.autoprefixer())
        .pipe($.sourcemaps.write("./"))
        .pipe($.size({gzip: true, showFiles: true}))
        .pipe(gulp.dest(pkg.paths.build.css));
});

gulp.task("tailwind", () => {
    $.fancyLog("-> Compiling tailwind css");
    return gulp.src(pkg.paths.tailwindcss.src)
        .pipe($.postcss([
            $.tailwindcss(pkg.paths.tailwindcss.conf),
            require("autoprefixer"),
        ]))
        .pipe($.if(process.env.NODE_ENV === "production",
            $.purgecss({
                extractors: [{
                    extractor: TailwindExtractor,
                    extensions: ["twig", "scss", "css", "js"]
                }],
                whitelist: pkg.globs.purgecssWhitelist,
                content: pkg.globs.purgecss
            })
        ))
        .pipe(gulp.dest(pkg.paths.build.css));
});

class TailwindExtractor {
    static extract(content) {
        return content.match(/[A-z0-9-:\/]+/g);
    }
}

gulp.task("css", ["tailwind", "scss"], () => {
    $.fancyLog("-> Building css");
    return gulp.src(pkg.globs.distCss)
        .pipe($.plumber({errorHandler: onError}))
        .pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName}))
        .pipe($.print())
        .pipe($.sourcemaps.init({loadMaps: true}))
        .pipe($.concat(pkg.vars.siteCssName))
        .pipe($.if(process.env.NODE_ENV === "production",
            $.cssnano({
                discardComments: {
                    removeAll: true
                },
                discardDuplicates: true,
                discardEmpty: true,
                minifyFontValues: true,
                minifySelectors: true
            })
        ))
        .pipe($.header(banner, {pkg: pkg}))
        .pipe($.sourcemaps.write("./"))
        .pipe($.size({gzip: true, showFiles: true}))
        .pipe(gulp.dest(pkg.paths.dist.css))
        .pipe($.filter("**/*.css"))
        .pipe($.livereload());
});

You can see I've replaced the 3rd line of the scss task so that it will deal with multiple sources and output multiple files to the build folder.

But what I'm getting stuck on is how does the tailwind task then know to use the file with the same name as used in the scss task and when it gets to the css task, how does it know not to use all the CSS files in the build folder, but only the one used in the previous tasks?

Is there a way of passing the file name to be used from one task to the next? Or should it be done a different way?

4

2 回答 2

0

您可以将编译后的 scsspkg.paths.build.css输出到不同的文件夹（即./build/scss/），然后将该文件夹设置为您的pkg.paths.tailwind.src?

或者，您可以尝试设置pkg.paths.tailwind.src为命名文件数组，例如

"tailwindcss": {
  "src":[pkg.paths.build.css + "fileA.css", pkg.paths.build.css + "fileB.css"],
  "conf": "./tailwind.config.js"
},

无论哪种方式，这将取决于tailwind任务的 PostCSS 部分如何处理传递的多个文件。

于 2019-06-14T07:19:09.680 回答
0

事实证明我比我想象的更接近。我需要做的唯一改变是在css任务中。

return gulp.src(pkg.globs.distCss)变成了return gulp.src(pkg.paths.build.css + '**/*.css')

.pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName}))变成了.pipe($.newer({dest: pkg.paths.dist.css}))

我删除.pipe($.concat(pkg.vars.siteCssName))了，因为我不再组合多个 CSS 文件了。

现在，这会将 CSS 文件保存到 build 文件夹，其文件名与原始 SCSS 文件相同，然后将其编译并保存到 dist 文件夹，再次使用相同的文件名。

于 2019-07-04T05:04:15.597 回答