包含gulp-file-include的gulp手表
我使用yeoman / generator-gulp-webapp，并添加了gulp-file-include 。 我build立了gulpfile.js来包含构build文件 ，但是我不知道如何设置gulp手表 。
以下是我尝试这样做，但似乎这是行不通的。 我没有得到任何错误。 一切工作正常，除了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']); }); 试试这个
`var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { gulp.src(['**/*.html']) .pipe(fileinclude()) .pipe(gulp.dest('./')); });`
并将fileinclude添加到watch 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']); });
为我工作得很好。
这个问题是在你的HTML任务：你的第一个来源是*.html所有的HTML文件，然后你通过pipe道只发送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')) });