Question

我想用这个顺序注入所有js文件：

首先从libs文件夹加载JS
来自供应商文件夹的JS加载第二个
来自自定义文件夹的JS最后加载

问题是每次运行gulp watch时js文件顺序是随机的。我正在使用gulp-inject与stream-series来处理文件顺序。

这是我的gulpfile.js：

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

var inject = require('gulp-inject');

var series = require('stream-series');

var paths = {
    sass: ['./app/assets/sass/**/*.scss']
};

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: 'app'
        }
    })
});

gulp.task('sass', function(){
    return gulp.src('./app/assets/sass/**/*.scss')
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(gulp.dest('./app/assets/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});


gulp.src('./app/**/*.html')
    .pipe(inject(gulp.src('./app/assets/js/**/*.js', {read: false}), {relative: true}))
    .pipe(gulp.dest('./app'));

gulp.task('inject', function () {
    var target = gulp.src('./app/**/*.html');

    var libStream = gulp.src(['./app/assets/js/libs/*.js'], {read: false});
    var vendorStream = gulp.src(['./app/assets/js/vendors/*.js'], {read: false});
    var appStream = gulp.src(['./app/assets/js/custom/*.js'], {read: false});

    return target.pipe(inject(series(libStream, vendorStream, appStream)))
});

gulp.task('watch',['browserSync', 'sass', 'inject'], function () {
    gulp.watch([paths.sass], ['sass']);
    gulp.watch('.app/*.html', browserSync.reload);
    gulp.watch('./app/assets/js/**/*.js', browserSync.reload);
});

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>

</head>
<body>
 Home


<!-- inject:js -->
<!-- endinject -->
</body>
</html>

的package.json：

{
  "devDependencies": {
    "browser-sync": "^2.24.4",
    "event-stream": "^3.3.4",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-inject": "^4.3.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^5.0.0",
    "stream-series": "^0.1.1"
  },
  "scripts": {
    "gulp": "gulp"
  }
}

Answer 1

因为评论太长了，这个无关的代码在你的文件中做了什么？

gulp.src('./app/**/*.html')
    .pipe(inject(gulp.src('./app/assets/js/**/*.js', {read: false}), {relative: true}))
    .pipe(gulp.dest('./app'));

删除它并查看它是否有帮助。

gulp-inject注入错误的文件顺序

1 个答案: