Question

我用webapp生成器搭建了一个项目。该项目仅适用于localhost，但如果我直接在具有文件方案的浏览器中打开文件则不能。网址http://localhost:9000/会在app文件夹中打开index.html文件，但http://localhost:9000/styles/main.css会打开app../.tmp/styles/main.css。非常熟悉localhost如何返回一个目录而实际上没有在窗口栏中打开的路径。这导致的问题是index.html仅将bower_componnets/example.css文件夹与localhost一起使用。使用文件方案，应用程序内部不存在bower_components文件夹。所以我不能在没有localhost的情况下使用app文件夹。

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

我浪费了两天与gulp bower yeoman和webapp战斗。我认为这可以通过自动化任务来减少我的时间，我会专注于代码。但它所做的是我完全失去了对实际工作的关注，我专注于每小时用bower，npm，gulp修复xyz问题。相反，我花了5分钟下载或找到插件的cdn并将其手动包含在我的代码中，我本可以保存2天。大口凉亭让5分钟工作2天。多么棒的工具。嗯..问题是：

如何使用webapp generator gulp构建类似于dist文件夹的非缩小生产代码？

编辑我的临时解决方案：

由于我们需要为我们的项目提供未经明确的html css和js文件，因此我在gulp文件中添加了一个新任务，以生成类似于demo的{{1}}文件夹。我只是复制了dist任务并将dist更改为gulp.src('dist/**/*')。要在此任务中生成样式和js文件夹中的文件，我在gulp.src('demo/**/*')存在的位置添加了.pipe(gulp.dest('demo'))。在gulp使用minify任务之前，我还注意放置.pipe(gulp.dest('dist')); });。这是相关的gulp.js代码：

.pipe(gulp.dest('demo'));
});

不幸的是，我找不到一些可以阻止gulp将所有css文件和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/**/*'); });文件中。此外，我找不到用他们的cdn替换本地插件的方法。

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

Answer 1

打开gulpfile.js并找到html任务。你应该看到这个块：

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

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

})))

评论该区块然后再次运行Gulp，您将看到index.html未经宣传。

Answer 2

您也必须对这些行进行注释：

.pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
.pipe($.if(/\.css$/, $.postcss([cssnano({safe: true, autoprefixer: false})])))

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

2 个答案: