如何正确包含安装为 NPM package 和 gulp 的 CSS&JS 文件？

Question

如何正确包含到index.html CSS&JS 文件安装为 NPM package 与 Z3DEDCC7065E340F09F276FBE51？

我已经使用 NPM 安装了 CSS 框架（物化）之一： npm install --save-dev materialize-css

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

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

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

Copy them to ./dist by using gulp task using absolute paths to the files in gulpfile.js , and reference them from index.html as ./dist/materialize.min.css and ./dist/materialize.min.js ?

任何建议将不胜感激。 抱歉，如果问题很愚蠢，很难找到解决此任务的“正确方法”。

Answer 1

我在gulpfile.js中得到了以下解决方案（我的示例使用materialize-css作为 npm package 和我想要包含的 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 上的双反斜杠转换为单个正斜杠。