Gulp 创建 dist 文件夹但不生成文件（没有错误）答案

【问题标题】：Gulp creates dist folder but doesn't generate files (without errors)Gulp 创建 dist 文件夹但不生成文件（没有错误）
【发布时间】：2019-05-08 06:16:53
【问题描述】：

我是使用 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
);

我想用'index.html'而不是'index.ejs'、'style.css'而不是'style.scss'和一个缩小的js来生成dist文件夹。

当我运行 gulp 时，它会启动并完成任务并开始观看。创建了一个 dist 文件夹，但在里面我只得到一个 index.ejs 文件，没有别的。

Gulp 没有显示任何错误。

节点 v10.14; npm v6.7； gulp cli v2.2；吞咽本地 v4.0

【问题讨论】：

好吧，你在scssPath: 'puclic/css/**/*.scss',中有一个错字
天哪，它有效！现在只是 .ejs 到 .html。谢谢

标签： javascript node.js sass gulp ejs

【解决方案1】：

正如我在您的帖子中评论的那样，这不起作用的原因是您的 scssPath 中有错字。

改变 scssPath: 'puclic/css/**/*.scss', 至 scssPath: 'public/css/**/*.scss',

将解决错误。

【讨论】：

【解决方案2】：

对于您的.ejs 问题，您误用了它的选项（假设您使用的是 gulp-ejs 的 v4）。你有

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

但是请看renaming file extensions:

从版本 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'))

【讨论】：