如何解决gulp-file-include在使用gulp的html中不起作用 @@ include'header.html'
我已经添加了gulp-file-include以便在html中使用@@include('include/head.html')
,但是它不能与BrowserSync一起工作以刷新更改。
@@ include在html文件中不起作用。我创建了index.html文件,以使用@@ include添加header.html,但未添加。
以下是我尝试执行的操作,但看来这不起作用。我没有任何错误。一切正常,除了index.html具有@@ include(...)而不是这些文件中的代码
var gulp = require('gulp'),eslint = require('gulp-eslint'),sass = require('gulp-sass'),sourcemaps = require('gulp-sourcemaps'),autoprefixer= require('gulp-autoprefixer'),image = require('gulp-image'),browserSync = require('browser-sync'),concat = require('gulp-concat'),reload = browserSync.reload,uglify = require('gulp-uglify'),//eslint = require('gulp-eslint'),//compass = require('gulp-compass'),del = require('del'),plumber = require('gulp-plumber'),//imagemin = require('gulp-imagemin'),rename = require('gulp-rename'),fileinclude = require('gulp-file-include'),require= ('babel-register');
function clean() {
return del([ 'build' ]);
}
/*
=====================
sdsd=
=============
*/
gulp.task('fileinclude_html',function() {
gulp.src(['blog-theme/**/*.html'])
.pipe(fileinclude({
prefix: '@@',basepath: '@file'
}))
.pipe(gulp.dest('build/'))
.pipe(reload({stream:true}))
});
/* =====================
Loding files.....
==================*/
var paths = {
styles: {
src: 'blog-theme/scss/*.scss',dest: 'build/css/'
},};
function errorlog(err){
console.error(err.message);
this.emit('end');
}
//////////////////////////////////////////////
//scripts Tasks
//////////////////////////////////////////////
gulp.task('scripts',function(){
gulp.src(['blog-theme/js/*.js','!blog-theme/js/**/*.min.js' ],['lint'])
.pipe(plumber())
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js/min'))
.pipe(reload({stream:true}));
});
//////////////////////////////////////////////
//HTML Task .... it is watich your each task in command line.....
//////////////////////////////////////////////
gulp.task('html',function(){
gulp.src('blog-theme/**/*.html')
.pipe(fileinclude())
.pipe(reload({stream:true}));
});
//////////////////////////////////////////////
//images Task ....
//////////////////////////////////////////////
gulp.task('image',function () {
gulp.src('blog-theme/image/*')
.pipe(image())
.pipe(gulp.dest('build/images/'));
});
// ////////////////////////////////////////////////
// Styles Tasks
// ///////////////////////////////////////////////
gulp.task('styles',function() {
gulp.src(paths.styles.src)
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}))
.on('error',errorlog)
.pipe(autoprefixer({
browsers: ['last 3 versions'],cascade: false
}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest(paths.styles.dest))
.pipe(reload({stream:true}));
});
//////////////////////////////////////////////
//Browser Sync ....
//////////////////////////////////////////////
gulp.task('browser-sync',function() {
browserSync({
server: {
baseDir: "./blog-theme/"
}
});
});
//////////////////////////////////////////////
//Watch task .... it is watich your each task in command line.....
//////////////////////////////////////////////
gulp.task ('watch',function(){
gulp.watch('blog-theme/scss/**/*.scss',['styles']);
gulp.watch('blog-theme/js/DOM/*.{js,jsx}',['scripts']);
gulp.watch('blog-theme/**/*.html',['html','fileinclude_html' ]);
});
//////////////////////////////////////////////
//Watch task .... Chrome update.....
//////////////////////////////////////////////
gulp.task('serve',['sass','fileinclude_html'],function() {
browserSync.init({
server: "./blog-theme"
});
gulp.watch("blog-theme/scss/*.scss",['sass']);
gulp.watch("blog-theme/**/*.html",['fileinclude_html']).on('change',browserSync.reload);
gulp.watch("blog-theme/js/*.js").on('change',browserSync.reload);
});
//*********** default task *****************
gulp.task('default',['scripts','styles','html','image','browser-sync','watch','fileinclude_html' ]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。