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页面（ina pages文件夹）中并将它们复制到app文件夹。表单app文件夹（包括完成后）html tast启动。我得到了所有的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

我有同样的问题，但分辨率有所不同。事实证明，问题是由行结尾引起的。

最初我的文件使用了Windows风格的行结尾。一切都很好。当我将其更改为unix样式的行结尾时，它就出错了。症状与bigcat描述的相同。

我认为unix风格的行结尾总体上是错误的。（显然他们不是。:)）我使用的不同文件之间可能存在一些错位。我没有时间进一步调查，但如果你有这样的症状，那么知道从哪里开始是件好事。

Answer 2

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

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构建concat脚本和css但不替换＆lt; - ！构建 - ＆gt;在HTML中

3 个答案: