我要实现的目标是为gulp提供一个名为“ theme.scss”的文件,并使其输出一个名为“ theme.css.liquid”(用于shopify)的已编译的css / liquid文件,其源映射名为“ theme”。 css.map”。
这是我到目前为止的工作代码。
gulp.task('build-css', function() {
return gulp.src(srcPath.cssMain)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass({ outputStyle: 'nested' })
.on('error', plugins.sass.logError)
.on('error', handleErrors))
.pipe(plugins.autoprefixer())
// remove the extra set of quotations used for escaping the liquid string
.pipe(plugins.replace('"{{', '{{'))
.pipe(plugins.replace('}}"', '}}'))
.pipe(plugins.sourcemaps.write('/'))
.pipe(gulp.dest(destPath.css))
});
这将输出以下文件“ theme.css”和“ theme.css.map”,唯一的问题是我需要css文件包含液体扩展名。我尝试在sourcemaps.write之前使用以下代码重命名文件。但这将更改两者的名称,输出“ theme.css.liquid”和“ theme.css.liquid.map”。此外,“ theme.css.liquid”文件在其末尾缺少指向地图文件的链接。
.pipe(plugins.rename({extname: 'css.liquid'}))"
我还尝试在写入源映射后进行raname,但是它将输出“ theme.css.liquid”和“ theme.css.css.liquid”(地图文件)。这是我最接近的工作版本,我只需要将地图文件重命名为“ theme.css.map”
任何帮助将不胜感激!谢谢!