如何使用webapp generator gulp构建非缩减生产代码？

Question

我用webapp生成器搭建了一个项目的脚手架。该项目只适用于本地主机，但不是如果我直接在浏览器中使用文件方案打开文件。 url http://localhost:9000/打开app文件夹中的index.html文件，但http://localhost:9000/styles/main.css打开app../.tmp/styles/main.css。我们非常讨厌localhost如何将一个目录返回到实际上没有在窗口栏中打开的路径。造成这个问题的原因是index.html仅将bower_componnets/example.css文件夹与本地主机配合使用。使用文件方案，应用程序中不存在bower_components文件夹。所以我不能使用没有本地主机的app文件夹。

手头上的实际问题是，我必须在服务器上传一个静态网页的工作演示，供后端开发人员用来制作动态代码。现在我无法上传应用程序文件夹，因为它仅适用于本地主机。与gulp build我得到一个dist文件夹与文件方案一起工作，但它被全部缩小并且不使用cdn。后端开发人员不能使用缩小的html。

我浪费了两天与gulp凉亭yeoman和webapp战斗。我认为这会通过自动执行任务来减少我的时间，并且我将专注于代码。但是它所做的是我完全从实际工作中失去了重点，而且我正在集中精力在每小时之后用bower，npm，gulp来解决xyz问题。相反，我花了5分钟下载或找到cdn插件，并将它们手动包含在我的代码中，我将保存2天。因此，吞咽凉亭使5分钟工作到2天的工作。多么辉煌的工具。嗯..问题是：

1. 如何构建一个非缩小生产代码类似于dist文件夹与webapp生成器gulp？

---

编辑我的临时解决方案：

因为我们需要unminified HTML CSS和JS文件为我们的项目我一饮而尽文件添加一个新的任务，以生成类似于dist一个demo文件夹。我只是复制远程任务，并将gulp.src('dist/**/*')更改为gulp.src('demo/**/*')。对于这个任务来生成样式和js文件夹中的文件，我在.pipe(gulp.dest('dist')); });存在的地方添加了0​​。在gulp使用minify任务之前，我也照顾把.pipe(gulp.dest('demo')); });。下面是相关gulp.js代码：

// some code here 

gulp.task('html', ['styles', 'scripts'],() => { 
    return gulp.src('app/*.html') 
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) 
    .pipe(gulp.dest('demo')) // I added my code here 
    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}}))) 
    .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false}))) 
    .pipe($.if(/\.html$/, $.htmlmin({  
     collapseWhitespace: true, 
     minifyCSS: true, 
     minifyJS: {compress: {drop_console: true}}, 
     processConditionalComments: true, 
     removeComments: true, 
     removeEmptyAttributes: true, 
     removeScriptTypeAttributes: true, 
     removeStyleLinkTypeAttributes: true  
    }))) 
    .pipe(gulp.dest('dist')); 
}); 

gulp.task('images',() => { 
    return gulp.src('app/images/**/*') 
    .pipe($.cache($.imagemin())) 
    .pipe(gulp.dest('demo/images')) // I added this 
    .pipe(gulp.dest('dist/images')); 
}); 

gulp.task('fonts',() => { 
    return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) 
    .concat('app/fonts/**/*')) 
    .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts'), gulp.dest('demo/fonts')) ); // I added demo here too 
}); 

gulp.task('extras',() => { 
    return gulp.src([ 
    'app/*', 
    '!app/*.html' 
    ], { 
    dot: true 
    }).pipe(gulp.dest('dist')).pipe(gulp.dest('demo')); // I added this 
}); 

gulp.task('clean', del.bind(null, ['.tmp', 'dist', 'demo'])); // I added demo here 

//some code here 


/*New Custom tasks*/ 

gulp.task('demo-build', ['lint', 'html', 'images', 'fonts', 'extras'],() => { 
    return gulp.src('demo/**/*'); 
}); 

不幸的是我couln't找了几个停止吞掉连接所有css文件和js文件合并成一个文件vendor.js/css。此外，我无法找到替代本地插件与他们的CDN的方式。

我学到的一件事非常好。 npm，gulp等不适用于前端开发人员;他们是nodeJs开发人员。可以在5分钟内完成的任务需要5个小时。但显然nodejs dev可以从中受益，因为他可以根据自己的需要定制这些插件。

Answer 1

打开gulpfile.js并找到html任务。您应该看到此块：

.pipe($.if('/\.html$/', $.htmlmin({ 

    // ... 
    // many options 
    // ... 

}))) 

评论则该块再次运行咕嘟咕嘟，你会看到你index.html unminified。