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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (200)

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

如何管理一个gulp构建到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']);
});
提问于
用户回答回答于

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

出于开发和测试目的,我使用非缩小版本。一旦产品准备好生产,我会重新测试但使用缩小版本,通常这是我发布的版本。

所以我编写我的脚本来生成两个文件(如果我有多个文件可以生成文件集)。

希望这可以帮助。

扫码关注云+社区

领取腾讯云代金券