- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理类似于 https://nystudio107.com/blog/a-better-package-json-for-the-frontend 中描述的过程但想修改它以便能够将不同的 SCSS
文件编译为同名的 CSS 文件,例如fileA.scss
编译为 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());
});
你可以看到我已经替换了 scss
任务的第 3 行,这样它将处理多个源并将多个文件输出到 build
文件夹。
但我遇到的问题是 tailwind
任务如何知道使用与 scss
任务中使用的名称相同的文件以及何时使用进入 css
任务,它怎么知道不使用构建文件夹中的所有 CSS 文件,而只使用之前任务中使用的 CSS 文件?
有没有办法将要使用的文件名从一个任务传递到下一个任务?还是应该以不同的方式完成?
最佳答案
不是将编译后的 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"
},
无论哪种方式,这都取决于 tailwind
任务的 PostCSS 部分如何处理传递的多个文件。
关于css - 编译不同 SCSS 文件的 Gulp 组合任务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56574338/
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目? 在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易,但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything),但是 gcc 会发出错误。 #include #include #include using namespace
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库,其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时,我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET,但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
我正在(重新)学习编程,我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。 这个例子: #include #include #in
我有一个项目,必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法,以便 src/main/java 使用 jdk 1.4 编译,但
我想了解 PHP 编译过程是如何工作的。 假设我有一个名为funcs.php 的文件并且这个文件有三个函数,如果我include 或require 它,所有的在文件加载期间编译三个函数?或者源代码会被
编译工具链 我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment),集成开发环境可以极大地方便我们程序员编写程序,但是配置起来
当我编写一些 Scala 代码时,在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义,但仍然显示了错误)。 scala> :paste // Ent
我正在编译一个 SCSS 文件,它似乎删除了我的评论。我可以使用什么命令来保留所有评论? >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
当您编译 grails war 时,我知道 .groovy 代码被编译为字节码类文件,但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗?安装在服务器上的
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么?谢谢! 文件:calcPi.c
我尝试使用 LD_PRELOAD 来 Hook sprintf function ,所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。 阅读documentation但仍然很难得到我想要的东西。 我需要它来监视文件夹 src/ 中的任何 *.coffee 文
我想使用定制waveformjs 。我发现this on SO但是,我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改,但是我不知道如何将其转换为 .js 文件。 最佳答案 为了
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我是一名优秀的程序员,十分优秀!