如何正确地将安装为NPM包的CSS&JS文件用gulp收录？

Question

如何正确地将CSS&JS文件包含到 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 在我的手底下？

使用文件的完整路径，在 node_modules 从 index.html 直接?

复制到 ./dist 借用 gulp 任务中的文件使用绝对路径。gulpfile.js，并将其作为参考。index.html 作为 ./dist/materialize.min.css 和 ./dist/materialize.min.js?

任何建议都将非常感激。对不起，如果问题很笨，只是很难找到 "正确的方法 "来解决这个任务。

Answer 1

我最终在下面的解决方案中找到了答案 gulpfile.js (我的例子使用的是 materialize-css 作为一个包含cssjs文件的npm包）。)

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上的双反斜线转换为单正斜线。