gulp-useref 构建连接脚本和 css 但不会替换 <--!构建 --> 在 html

Question

我使用 gulp-usref、gulp-if、gulp-uglify、gulp-csso 和 gulp-file-include 构建我的应用程序。除了 HTML 保持原样外，构建中一切正常。我的 gulp 文件是这样设置的：

gulp.task('html', ['diststyles', 'scripts'], function () {
var assets = $.useref.assets();

return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'))
    .pipe($.size());
});

diststyles 和脚本设置如下：

gulp.task('diststyles', function () {
return gulp.src('app/styles/scss/*.scss')
    .pipe($.sass({
        errLogToConsole: true,
        includePaths: ['app/bower_components/foundation/scss'],
    }))
    .pipe($.autoprefixer('last 2 version'))
    .pipe(gulp.dest('app/styles'))
    .pipe(reload({stream:true}))
    .pipe($.size())
    .pipe($.notify("Compilation complete."));
});

gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
    .pipe($.jshint())
    .pipe($.jshint.reporter(require('jshint-stylish')))
    .pipe($.size());
});

我使用的文件结构是这样的：

root
+-- app
    +-- bower_components
    +-- components
        header.html
        footer.html
    +-- pages
        home.html
    +-- scripts
        main.js
    +-- svg
+-- dist
    +-- scripts
        +-- vendor
            modernizr.js
        main.js
        plugins.js
        vendor.js
    +-- styles
        main.css
    home.html

当我运行 gulp 首先我将组件包含到 html 页面（在页面文件夹中）并将它们复制到应用程序文件夹。表单应用程序文件夹（包含完成后）html 开始。我把我所有的 js 和 css 文件连接起来并按原样复制到 dist，但是在 html 文件中它是这样的：

<!-- build:css({.tmp,app}) styles/menu.css -->
<link rel="stylesheet" href="styles/menu.css">
<link rel="stylesheet" href="styles/fonts.css">
<!-- endbuild -->`

任何想法是什么导致了这个问题以及如何解决这个问题？

Answer 1

成功了。我刚刚将我所有的 npm 模块更新到更新的版本，它开始工作了。

Answer 2

我遇到了同样的问题，但解决方案有所不同。原来问题是由行结尾引起的。

最初我的文件使用 windows 风格的行结尾。那一次一切正常。当我将其更改为 unix 样式的行结尾时，它出错了。症状与 bigcat 描述的相同。

我不认为 unix 风格的行结尾通常是错误的。（显然它们不是。:)）我使用的不同文件之间可能存在一些错位。我没有时间进一步调查，但如果您有此类症状，那么最好知道从哪里开始。

Answer 3

我遇到了同样的问题，我用 gulp-eol 解决了这个问题。使用示例：

var gulp = require('gulp');
var useref = require('gulp-useref');
var eol = require('gulp-eol');

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(eol('\r\n'))
        .pipe(useref())
        .pipe(gulp.dest('dist')); });

gulp-useref 构建连接脚本和 css 但不会替换 <--!构建 --> 在 html

gulp-useref build concat scripts and css but doesn't replace <--! build --> in html

gulp