Gulp создает папку dist, но не генерирует файлы (без ошибок) - PullRequest
0 голосов
/ 07 мая 2019

Я новичок в работе с node, ejs и gulp, мой проект структурирован так:

public
   css
     style.scss
   js
   images
views
   components
     navbar.ejs
   index.ejs
gulpfile.js
server.js

Я попробовал этот gulpfile.js:

const { src, dest, watch, series, parallel } = require('gulp');

const sourcemaps = require('gulp-sourcemaps');
var ejs = require("gulp-ejs");
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
var replace = require('gulp-replace');


// File paths
const files = {
    scssPath: 'puclic/css/**/*.scss',
    jsPath: 'public/js/**/*.js',
    ejsPath: 'views/*.ejs'
}


function scssTask() {
    return src(files.scssPath)
        .pipe(sourcemaps.init()) // initialize sourcemaps first
        .pipe(sass()) // compile SCSS to CSS
        .pipe(postcss([autoprefixer(), cssnano()])) // PostCSS plugins
        .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
        .pipe(dest('dist')); // put final CSS in dist folder
}


function jsTask() {
    return src([
            files.jsPath
            //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
        ])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist'));
}

function ejsTask() {
    return src(files.ejsPath)
    .pipe(ejs({}, {ext: '.html'}))
    .pipe(dest('dist'))
}


function watchTask() {
    watch([files.scssPath, files.jsPath, files.ejsPath],
        parallel(scssTask, jsTask, ejsTask));
}


exports.default = series(
    parallel(scssTask, jsTask, ejsTask),
    watchTask
);

Я хочу сгенерировать папку dist с помощью «index.html» вместо «index.ejs», «style.css» вместо «style.scss» и минимизированного js.

Когда я запускаю gulp, он запускает и заканчивает задачи и начинает наблюдать. Папка dist создается, но внутри нее я получаю только файл index.ejs и ничего больше.

Gulp не показывает ошибок.

узел v10.14; нпм v6.7; глоток кли v2.2; глоток местный v4.0

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Для вашей проблемы .ejs вы неправильно используете ее параметры (предполагается, что вы используете версию 4 gulp-ejs).У вас есть

.pipe(ejs({}, {ext: '.html'}))

Но вы видите переименование расширений файлов :

Начиная с версии 4, настройки третьего параметра API были удалены.Вы больше не можете предоставить расширение.Это потому что он выпадает из сферы действия gulp-ejs.Поэтому, если вам нужно сохранить файл с другим расширением, вы можете использовать gulp-rename.

Вот пример для файлов шаблонов с расширением .ejs, которые отображаются в файлы .html:

const ejs = require('gulp-ejs')
const rename = require('gulp-rename')

gulp.src('./templates/*.ejs')
  .pipe(ejs({ title: 'gulp-ejs' }))
  .pipe(rename({ extname: '.html' }))
  .pipe(gulp.dest('./dist'))
1 голос
/ 07 мая 2019

Как я прокомментировал ваше сообщение, причина, по которой это не сработало, заключалась в том, что в scssPath была опечатка.

Изменение scssPath: 'puclic/css/**/*.scss', на scssPath: 'public/css/**/*.scss',

разрешитошибка.

...