Gulp開發工作流程和“ dist”文件夾

Question

我對gulp比較陌生，並且將它用作任務運行器來連接和編譯.js和sass / css文件。 這些方面目前正在開發環境中工作。

我感到困惑的是工作流程問題。 現在，我所包含的文件位於以下文件夾中：

-css (myapp.css)
-js (myappconcat.js)

如果我在本地工作，我還不想為了調試目的而縮小它們（對嗎？）。

但是，仔細閱讀gulp，我發現通常會建立構建任務以將資產縮小到“ dist”文件夾中進行生產。 如何在HTML文件中進行管理？

例如，在我的開發HTML文件中，我將包含CSS和js，如下所示：

<link href="/css/myapp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/myappconcat.js"></script>

但是，當我將縮小的文件構建到“ dist”目錄時，我將不得不為每個HTML文件更改上述includes中的路徑。

如何在不更改HTML的每個include路徑的情況下將gulp構建管理到dist文件夾？ 同樣，當我縮小生產規模時，也不必更改HTML包含文件中的.js和CSS文件名嗎？ 還是應該在開發中使用縮小文件？

編輯：這是基本的網站結構：

wwwroot
   -.html files
   - gulpfile.js
   - package.json
   /css
     -main.css
   /dist
   /js
   /scss  

和gulpfile.js

// Required gulp modules
var gulp      = require('gulp'),
    concat    = require('gulp-concat'),
    uglify    = require('gulp-uglify'),
    rename    = require('gulp-rename'),
    sass      = require('gulp-sass'),
    maps      = require('gulp-sourcemaps'),
    del       = require('del'),
    jshint    = require('gulp-jshint'),
    stylish   = require('jshint-stylish'),
    gutil     = require( 'gulp-util' ),
    merge     = require('merge-stream'),
    imagemin  = require('gulp-imagemin'),
    cleanCSS  = require('gulp-clean-css');

// error reporter in progress
var reportError = function( err ) {

  gutil.beep();

  var title = 'Error';

  if( err.plugin === 'gulp-sass' ) {
    title = 'SCSS Compilation Error';
  }

  var msg = '\n============================================\n\n';
  msg += title += '\n\n';
  msg += err.message + '\n\n';
  msg += '============================================';

  gutil.log( gutil.colors.red( msg ) );

  if( err.plugin === 'gulp-sass' ) {

   this.emit('end');

  }

};

// Concatenate .js files with lint-js as the dependency
gulp.task("concatScripts", ["lint-js"], function() {
   return gulp.src([
       'js/*.js'
       ,'node_modules/jquery-placeholder/jquery.placeholder.js'
       ])
   .pipe(maps.init())
   .pipe(concat('zConcat.js'))
   .pipe(maps.write('./'))
   .pipe(gulp.dest('dist/js'));//write to separate dir than src otherwise 
     overwrites itself!
});

// Minify .js files with concatscripts as the dependency
gulp.task("minifyScripts", ["concatScripts"], function() {
  return gulp.src("dist/js/zConcat.js")
    .pipe(uglify())
    .pipe(rename('zConcat.js'))
    .pipe(gulp.dest('dist/js'));
});

// .js Linter for catching errors when any .js changes
gulp.task('lint-js', function () {
  return gulp.src([
      'js/*.js',       // all custom .js
      //'!_js/public/js/html5shiv.js', // ignore shiv
    ])
    .pipe(jshint())
    .pipe(jshint.reporter(stylish));    // color-coded line by line errors
});

// Compile sass files
gulp.task('compileSass', function() {
  return gulp.src("scss/main.scss")
      .pipe(maps.init())
      .pipe(sass(
       {
       outputStyle: 'expanded'
       }
     ).on( 'error',  reportError) ) //sass.logError
      .pipe(maps.write('./'))
      .pipe(gulp.dest('css'));
});

// Minify CSS after compiling
 gulp.task('minifyCSS', () => {
   return gulp.src('css/*.css')
   .pipe(maps.init())
   .pipe(cleanCSS({compatibility: 'ie8'}))
   .pipe(rename('main.min.css'))
   .pipe(maps.write('./'))
   .pipe(gulp.dest('css'));
});

// Watch and process SASS and .js file changes
gulp.task('watchFiles', function() {
  gulp.watch(['scss/**/*.scss','scss/*.scss'], ['compileSass']);
  gulp.watch( 'css/*.css', ['minifyCSS']);
  gulp.watch('js/**/*.js', ['concatScripts']);
});

Answer 1

這可能已經晚了，但沒人回答。

對我來說，我創建了兩個生產文件（如果輸出是多個文件，則創建文件夾，每個文件夾包含一組文件）。 一個是縮小的，另一個不是。

為了進行開發和測試，我使用非縮小版。 產品准備好生產后，我將使用縮小版進行重新測試，通常這是我發布的版本。

因此，我編寫腳本以生成兩個文件（如果要生成的文件超過一個，則為文件集）。

希望這可以幫助。