Объединенная задача Gulp, которая компилирует различные файлы SCSS - PullRequest
Новая
       54

Объединенная задача Gulp, которая компилирует различные файлы SCSS

0 голосов
/ 13 июня 2019

Я работаю над процессом, аналогичным описанному в https://nystudio107.com/blog/a-better-package-json-for-the-frontend, но хочу изменить его, чтобы иметь возможность компилировать различные файлы SCSS в файлы CSS с одинаковыми именами, например, fileA.scss compilesна fileA.css.

То, что у меня есть на данный момент, работает нормально, если я просто работаю с одним SCSS файлом master.scss, компилируемым в site.combined.min.css.

с 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": []
},

И задачи Gulp 

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());
});

Вы можете видеть, что я заменил 3-ю строку задачи scss, чтобы она работала с несколькими источниками и выводила несколько файловв папку build.

Но я застрял в том, как задача tailwind узнает об использовании файла с тем же именем, что и в задаче scss, и когда онпопадает в задачу css, откуда он знает, что нужно использовать не все файлы CSS в папке сборки, а только тот, который использовался в предыдущих задачах?

Есть ли способ передачи имени файла виспользоваться от одного задания к другому?Или это должно быть сделано по-другому?

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Оказывается, я был ближе, чем думал. Единственные изменения, которые мне нужно было сделать, были в задаче 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 сохраняется в папке сборки с тем же именем файла, что и исходный файл SCSS, а затем он компилируется и сохраняется в папке dist, снова с тем же именем файла.

0 голосов
/ 14 июня 2019

Вместо вывода скомпилированного scss в pkg.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"
},

В любом случае, это будет зависеть от того, как часть PostCSS задачи tailwind обрабатывает передачу нескольких файлов ..

...