Question

我对gulp相对较新，并且正在使用它作为taskrunner来连接和编译.js和sass / css文件。这些方面目前正在开发环境中工作。

我感到困惑的是工作流程问题。现在我的concatentated文件在这些文件夹中：

-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文件更改上面包含的路径。

如何管理一个dulp构建到dist文件夹而不必更改HTML中每个包含的路径？同样，当我缩小生产时，我是否也必须更改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

这可能要晚了，但没人回答。

对我来说，我创建了两个生产文件（如果输出是多个文件，则创建文件夹，每个文件夹包含一组文件）。一个是缩小的，另一个不是。

出于开发和测试目的，我使用非缩小版。产品准备好生产后，我将使用缩小版进行重新测试，通常这是我发布的版本。

所以我写我的脚本来产生两个文件（如果我要产生的文件多，则写文件集）。

希望这会有所帮助。

Gulp开发工作流程和'dist'文件夹

1 个答案: