如何使用 gulp 正确包含作为 NPM 包安装的 CSS&JS 文件？

Question

如何正确地将 index.html CSS&JS 文件安装为 gulp 的 NPM 包？

我已经使用 NPM 安装了 CSS 框架之一 (Materialize)： npm install --save-dev materialize-css

现在我想将此框架中的 CSS 和 JS 文件包含到我的 index.html 中。它们位于 node_modules/materialize-css/dist/css/materialize.min.css 和 node_modules/materialize-css/dist/js/materialize.min.js.

下

考虑到我手下有gulp，实现它的正确方法是什么？

直接使用 index.html 中 node_modules 中文件的完整路径？

使用 gulpfile.js 中文件的绝对路径使用 gulp 任务将它们复制到 ./dist，并从 index.html 引用它们作为 ./dist/materialize.min.css 和./dist/materialize.min.js?

如有任何建议，我们将不胜感激。抱歉，如果问题很愚蠢，很难找到 "the right way" 来解决这个任务。

Answer 1

我在 gulpfile.js 中得到了以下解决方案（我的示例使用 materialize-css 作为 npm 包，其中包含我想要包含的 css/js 个文件）：

const slash = require('slash');
const merge = require('merge-stream');

const globs = {
    ...,
    dest: {
        dirs: {
            css: 'dist/css',
            js: 'dist/js'
        }
    },
    materializecss: {
        css: 'materialize-css/dist/css/materialize.min.css',
        js: 'materialize-css/dist/js/materialize.min.js',
        nouislider: {
            css: 'materialize-css/extras/noUiSlider/nouislider.css',
            js: 'materialize-css/extras/noUiSlider/nouislider.min.js'
        }
    }
};

function vendors() {
    const resolve = (p) => slash(require.resolve(p));
    // prettier-ignore
    return merge(
        src(resolve(globs.materializecss.css))
            .pipe(dest(globs.dest.dirs.css)),
        src(resolve(globs.materializecss.js))
            .pipe(dest(globs.dest.dirs.js)),
        src(resolve(globs.materializecss.nouislider.css))
            .pipe(dest(globs.dest.dirs.css)),
        src(resolve(globs.materializecss.nouislider.js))
            .pipe(dest(globs.dest.dirs.js)));
}

require.resolve(relative_path) 自动解析 node_modules 目录中的相对文件名。 slash 用于将 Windows 上的双反斜杠转换为单个正斜杠。

如何使用 gulp 正确包含作为 NPM 包安装的 CSS&JS 文件？

How to properly include CSS&JS files installed as an NPM package with gulp?

html

javascript

css

npm

gulp