如何使用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。