Часы Gulp с gulp-file-include

Question

Я использую yeoman/generator-gulp-webapp и я добавил gulp-file-include. Я установил gulpfile.js, чтобы включить файлы на сборке, но я не знаю, как настроить для gulp watch.

Ниже приведена моя попытка сделать это, но, похоже, это не работает. У меня нет ошибок. Все работает отлично, кроме index.html имеет @@ включать (...) вместо кода из этих файлов

'use strict'; 
// generated on 2014-10-27 using generator-gulp-webapp 0.1.0 

var gulp = require('gulp'); 

// load plugins 
var $ = require('gulp-load-plugins')(); 

gulp.task('styles', function() { 
    return gulp.src('app/styles/main.scss') 
     .pipe($.rubySass({ 
      style: 'expanded', 
      precision: 10 
     })) 
     .pipe($.autoprefixer('last 1 version')) 
     .pipe(gulp.dest('.tmp/styles')) 
     .pipe($.size()); 
}); 

gulp.task('fileinclude', function() { 
    return gulp.src('app/*.html') 
     .pipe($.fileInclude()) 
     .pipe($.size()); 
}) 

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

gulp.task('html', ['styles', 'scripts'], function() { 
    var jsFilter = $.filter('**/*.js'); 
    var cssFilter = $.filter('**/*.css'); 

    return gulp.src(['app/*.html']) 
     .pipe($.fileInclude()) 
     .pipe($.useref.assets({searchPath: '{.tmp,app}'})) 
     .pipe(jsFilter) 
     .pipe($.uglify()) 
     .pipe(jsFilter.restore()) 
     .pipe(cssFilter) 
     .pipe($.csso()) 
     .pipe(cssFilter.restore()) 
     .pipe($.useref.restore()) 
     .pipe($.useref()) 
     .pipe(gulp.dest('dist')) 
     .pipe($.size()); 
}); 

gulp.task('images', function() { 
    return gulp.src('app/images/**/*') 
     .pipe($.cache($.imagemin({ 
      optimizationLevel: 3, 
      progressive: true, 
      interlaced: true 
     }))) 
     .pipe(gulp.dest('dist/images')) 
     .pipe($.size()); 
}); 

gulp.task('fonts', function() { 
    return $.bowerFiles() 
     .pipe($.filter('**/*.{eot,svg,ttf,woff}')) 
     .pipe($.flatten()) 
     .pipe(gulp.dest('dist/fonts')) 
     .pipe($.size()); 
}); 

gulp.task('extras', function() { 
    return gulp.src(['app/*.*', '!app/*.html'], { dot: true }) 
     .pipe(gulp.dest('dist')); 
}); 

gulp.task('clean', function() { 
    return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean()); 
}); 

gulp.task('cleanafter', function() { 
    return gulp.src(['dist/*.tmp.html'], { read: false }).pipe($.clean()); 
}); 

gulp.task('build', ['html', 'images', 'fonts', 'extras']); 

gulp.task('default', ['clean'], function() { 
    gulp.start('build'); 
}); 

gulp.task('connect', function() { 
     var connect = require('connect'); 
     var app = connect() 
      .use(require('connect-livereload')({port: 35729})) 
      .use(connect.static('app')) 
      .use(connect.static('.tmp')) 
      .use(connect.directory('app')); 

     require('http').createServer(app) 
      .listen(9000) 
      .on('listening', function() { 
       console.log('Started connect web server on http://localhost:9000'); 
      }); 
}); 

gulp.task('serve', ['connect', 'fileinclude', 'styles'], function() { 
    require('opn')('http://localhost:9000'); 
}); 

// inject bower components 
gulp.task('wiredep', function() { 
    var wiredep = require('wiredep').stream; 

    gulp.src('app/styles/*.scss') 
     .pipe(wiredep({ 
      directory: 'app/bower_components' 
     })) 
     .pipe(gulp.dest('app/styles')); 

    gulp.src('app/*.html') 
     .pipe(wiredep({ 
      directory: 'app/bower_components' 
     })) 
     .pipe(gulp.dest('app')); 
}); 

gulp.task('watch', ['connect', 'fileinclude', 'serve'], function() { 
    var server = $.livereload(); 

    // watch for changes 

    gulp.watch([ 
     'app/*.html', 
     '.tmp/styles/**/*.css', 
     'app/scripts/**/*.js', 
     'app/images/**/*' 
    ]).on('change', function (file) { 
     server.changed(file.path); 
    }); 

    gulp.watch('app/styles/**/*.scss', ['styles']); 
    gulp.watch('app/scripts/**/*.js', ['scripts']); 
    gulp.watch('app/images/**/*', ['images']); 
    gulp.watch('app/*.html', ['fileinclude']); 
    gulp.watch('bower.json', ['wiredep']); 
}); 

Answer 1

Попробуйте один

`var fileinclude = require('gulp-file-include'); 
gulp.task('fileinclude', function() { 
    gulp.src(['**/*.html']) 
    .pipe(fileinclude()) 
    .pipe(gulp.dest('./')); 
});` 

и добавьте fileinclude в к массиву часы Taks.

gulp.task('watch', ['fileinclude','serve'], function() { 
gulp.watch(['app/**/*'], reload); 
gulp.watch('app/styles/**/*.scss', ['styles']); 
gulp.watch('app/scripts/**/*.js', ['scripts']); 
gulp.watch('app/images/**/*', ['images']); 
gulp.watch('bower.json', ['wiredep']); 
}); 

Работы хорошо для меня.

Answer 2

Вопрос находится в вашей HTML задачи: Ваш первый источник *.html все файлы HTML, то вы отправка только html-файлов через канал.

Если вы смените источник на app/**/*, вы получите все файлы.

gulp.task('html', ['styles', 'scripts'], function() { 

    return gulp.src(['app/**/*']) 
    .pipe($.fileInclude()) 
    .pipe($.useref.assets({searchPath: '{.tmp,app}'})) 
    .pipe(jsFilter) 
    .pipe($.uglify()) 
    .pipe(jsFilter.restore()) 
    .pipe(cssFilter) 
    .pipe($.csso()) 
    .pipe(cssFilter.restore()) 
    .pipe($.useref.restore()) 
    .pipe($.useref()) 
    .pipe(gulp.dest('dist')) 
});