如何在Webpack v3中构建一个较少的编译链（gulp -style）？ [英] How to build a less compilation chain (gulp -style) in Webpack v3?

问题描述

对于一个新项目，我必须保留webpack-only的东西，因此需要找到一种方法来有效地编译我们的样式表。基本上以一种非常古老的方式：

• 收集所有较少文件，包括 glob-patterns 像 src / ** / *。less （css order可能是任意的）


• 也允许导入css文件，例如 ../ node_modules / vendor / ** / *。css 或 3rdparty / master.less
  
  
  
  
  • （如果我必须设置 bogus.js 入口点，罚款...）
  
  

所有这些，一个典型的gulp工作流程：

• 转换成css


• merge（concat）less和css


• 具有 cssnano 执行其优化作业，使用特定的css纳米选项 orderedValues：false，normalizeWhitespace：true ...


• 写 styles.css 作为最终输出

当然：

styles.css.map $ b

• $ b
• 有效的监视和通常的懒惰/渐进式编译（如gulp 和 webpack所具备的）

我做的一些 不是 需要的是 css modules （css 已导入作为散列范围的选择器...）

在Webpack中如何处理'typical'less | css处理工具链？

这个SO问题有我的第一尝试，我陷入了困境在合并之后，中间人就在中间......

---

考虑到目前为止（有用或不可用）

我知道，对于webpack，任何包括css甚至字体和图像的资源都是一个模块......而不是将我的css模块与实际的js（稍后再辛苦地将它们再次分开），可能更明智的做法是并行地创建入口点 cssstub.js - 也称为多编译器模式。 然而，那真的是，我的智慧结束了......在webpack中对一组文件执行一系列$事情似乎非常困难（除非它是一个连接的javascript模块图）。我确实发现 globbing ，但这还不够（合并CSS， cssnano，...），大多数情况下我只是无法将这些部分粘合在一起...

解决方案

我已经使用gulp减少并创建相应的地图，如下所示：

第一步在tmp文件夹中编译少量和生成的css

  gulp.task（'compile-less'，function（）{
 gulp.src（'./*。less'）//文件路径
 .pipe （'（'error'，function（err）{
 console.log（err）; 
）））
 .pipe（gulp.dest（'./ tmp / '））; 
}）; 
  

第二步缩小生成的CSS并创建地图文件

  gulp.task（'build-css'，['clean']，function（）{
 return gulp.src（'./ tmp / ** / * .css'）
 .pipe（sourcemaps.init（））
 .pipe（cachebust.resources（））
 .pipe（sourcemaps.write（'./ maps'））
 .pipe（gulp.dest（'./ compiled / css'））; 
}）; 
  

如果您希望添加额外的步骤来生成生成的CSS。

For a new project I am bound to keep things webpack-only, and thus need to find a way to efficiently compile our stylesheets. Basically in a very gulh-ish way:

• gather all less-files including glob-patterns like src/**/*.less (css order may be arbitrary)
• also allow import of css files like, say ../node_modules/vendor/**/*.css or 3rdparty/master.less
  • (If I have to setup a bogus.js entry point for that, fine...)

And with all of that, a typical gulp workflow:

• transpile less to css
• merge (concat) less and css
• have cssnano do its optimization job, with specific css nano options like e.g. orderedValues: false, normalizeWhitespace: true ...
• write styles.css as final output

And of course:

• have source-maps survive that chain for a styles.css.map
• efficient watching and the usual lazy/incremental compilation (as gulp and webpack have it)

Something I do not need is css modules (css imported into node modules for 'scoped' use, coming out as hash-scoped selectors...)

How can a 'typical' less|css-processing toolchain be done in Webpack?

This SO question has my first attempt where I got stuck in config hell right in the middle after combining...

---

considerations so far (helpful or not)

I know, to webpack, any ressource including css or even font and images is a "module"... Rather than merging my css 'modules' with with actual js (only to later painstakingly separate them again later again), it might be wiser, to have an entry point cssstub.js in parallel – also known as multi-compiler mode.

But that's really, where my wisdom ends... doing a sequence of $things on a set of files in webpack seems really hard (unless it's a connected javascript module graph). I did find something on globbing, but that's not enough (merge css, cssnano,...) and mostly I simply can't glue the pieces together...

解决方案

I have used gulp to build less and create corresponding maps like below:

First step compiles less and generated css in tmp folder

gulp.task('compile-less', function () {
    gulp.src('./*.less') // path to your file
    .pipe(less().on('error', function(err) {
        console.log(err);
    }))
    .pipe(gulp.dest('./tmp/'));
});

Second step minifies generated css and create map files

gulp.task('build-css', ['clean'], function() {
    return gulp.src('./tmp/**/*.css')
        .pipe(sourcemaps.init())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./compiled/css'));
});

If you want you can add additional step to conact generated css.

这篇关于如何在Webpack v3中构建一个较少的编译链（gulp -style）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！