Как правильно включить файлы CSS и JS, установленные как пакет NPM с помощью gulp? - PullRequest
Новая
       33

Как правильно включить файлы CSS и JS, установленные как пакет NPM с помощью gulp?

0 голосов
/ 09 мая 2020

Как правильно включить файлы index.html CSS и JS, установленные как пакет NPM с помощью gulp?

Я установил одну из фреймворков CSS (Materialize) с помощью NPM : 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?

Любые советы будут высоко ценится. Извините, если вопрос тупой, просто сложно найти "правильный способ" решения этой задачи.

1 Ответ

0 голосов
/ 12 мая 2020

Я получил следующее решение в 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 используется для преобразования двойной backsla sh on Windows в одиночный прямой sla sh.

...