如何使用webapp generator gulp构build非缩减的生产代码？
我用webapp生成器搭build了一个项目。 该项目只适用于本地主机，但不是如果我用文件scheme直接在浏览器中打开文件。 URL http://localhost:9000/打开app文件夹中的index.html文件，但http://localhost:9000/styles/main.css打开app../.tmp/styles/main.css 。 实际上，本地主机如何将一个目录返回到窗口栏中而不打开path。 这造成的问题是index.html使用bower_componnets/example.css文件夹与本地主机。 用文件scheme里面不存在应用程序内的bower_components文件夹。 所以我不能使用没有本地主机的app文件夹。
实际的问题是，我必须在服务器上传一个静态网页的工作演示，供后端开发者用来制作dynamic代码。 现在我无法上传应用程序文件夹，因为它只能在本地主机上运行。 随着gulp build我得到一个dist文件夹与文件计划，但它是全部缩小，不使用cdn。 后端开发人员不能使用缩小的html。
我浪费了两天的时间与g ye水手和webapp战斗。 我认为这将通过自动化任务来减less我的时间，并且我将着重于代码。 但是做了什么，我已经完全从实际工作中失去了重点，我正在集中精力在每一个小时后，用凉亭，npm，gulp来解决xyz问题。 相反，我花了5分钟的时间下载或findcdn的插件，并将它们手动包含在我的代码中，我将保存2天。 所以g b凉亭做了5分钟工作到2天工作。 多么辉煌的工具。 那么问题是：
- 如何使用webapp generator gulp构build一个类似于dist文件夹的非缩减生产代码？
编辑我的临时解决scheme
因为我们需要为我们的项目使用unminified html css和js文件，所以我在gulp文件中添加了一个新任务来生成类似于dist的demo文件夹。 我只是复制gulp.src('dist/**/*')任务，并将gulp.src('dist/**/*')改为gulp.src('demo/**/*') 。 为了这个任务生成样式和js文件夹中的文件，我添加了.pipe(gulp.dest('demo'))在.pipe(gulp.dest('dist')); }); .pipe(gulp.dest('dist')); }); 存在。 我也照顾把.pipe(gulp.dest('demo')); }); .pipe(gulp.dest('demo')); }); 在gulp使用minify任务之前。 这里是相关的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/**/*'); });
不幸的是，我没有find一些阻止所有的CSS文件和js文件连接到一个vendor.js/css文件。 我也无法findreplace本地插件与他们的CDN的方式。
有一件事我学到了很好。 npm，gulp等不是前端开发者; 他们是为nodeJs开发者。 可以在5分钟内完成的任务需要5个小时。 但显然nodejs dev可以从中受益，因为他可以根据自己的需要定制这些插件。
打开gulpfile.js并findhtml任务。 你应该看到这个块：
.pipe($.if('/\.html$/', $.htmlmin({ // ... // many options // ... })))
再评论块，然后再运行Gulp，你会看到你的index.html未定义。