更多前端资源敬请关注

每次修改完一个文件后,居然要手动运行gulp命令,这件事怎么看怎么不对劲.

当初说好的开发效率?说好的全自动构建呢?难道你已经忘了那年大明湖畔的夏雨荷了吗?

好了好了,我知道问题出在哪里,在第二篇里,我给大家介绍过一个神器,browsersync;真不是我忘了它,而是缺少前面几章的铺垫,我们很难直接拿来使用,你看今天不就是过来填完这个坑呢?

我们现在想要做个这样的需求,每当我们修改过文件后,自动帮我们编译EJS模板,然后拷贝文件到对应文件里,然后帮我们打开浏览器,自动刷新.

嗯,任务很简单.

0x00
首先安装browsersync,你们会很奇怪,为什么已经安装过一次了,为什么还需要安装?我也奇怪呢,不过我们需要局部引用它,所以还是局部下载一下.
首先cmd进入到我们的项目目录下.

[Shell] 纯文本查看 复制代码

npm install browser-sync  --save-dev

0x01
大改一下我们的gulpfile.js

[JavaScript] 纯文本查看 复制代码

var gulp = require('gulp');
var ejs = require('gulp-ejs')

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;


gulp.task('default', ['serve']);

//监听任务,监听如果有文件变动,触发reload任务
gulp.task("watch", function() {
    return gulp.watch(["./src/**/*.*"], ["reload"]);
});

//reload任务,执行之前调用html任务
gulp.task("reload", ['ejs'], function(cb) {
    return browserSync.reload();
});

//开启服务器任务,调用ejs和监听任务
gulp.task('serve', ['ejs', 'watch'], function() {
    browserSync.init({
        files: "./**/*",
        server: "./dist"
    });
});

//编译ejs模板任务
gulp.task('ejs', ["style"], function() {
    return gulp.src("./src/*.ejs")
        .pipe(ejs({ msg: 'Hello Gulp!' }, {}, { ext: '.html' }))
        .pipe(gulp.dest("./dist"))

})
//编译style样式
gulp.task('style', function() {
    return gulp.src('./src/**/*.css')
        .pipe(gulp.dest("./dist"))
})

任务越来越多,将来我们会将这些任务分离成很多个文件,现在我们暂时先这样.

好了 这个时候,我们去运行gulp.

铛铛,我们的任务就会一直保持运行在那,并且当我们修改文件的时候,浏览器也会自动帮我们刷新,实现了所写即所得.

你已经离一个高级前端不远了.

更多前端资源敬请关注

每次修改完一个文件后,居然要手动运行gulp命令,这件事怎么看怎么不对劲.

当初说好的开发效率?说好的全自动构建呢?难道你已经忘了那年大明湖畔的夏雨荷了吗?

好了好了,我知道问题出在哪里,在第二篇里,我给大家介绍过一个神器,browsersync;真不是我忘了它,而是缺少前面几章的铺垫,我们很难直接拿来使用,你看今天不就是过来填完这个坑呢?

我们现在想要做个这样的需求,每当我们修改过文件后,自动帮我们编译EJS模板,然后拷贝文件到对应文件里,然后帮我们打开浏览器,自动刷新.

嗯,任务很简单.

0x00
首先安装browsersync,你们会很奇怪,为什么已经安装过一次了,为什么还需要安装?我也奇怪呢,不过我们需要局部引用它,所以还是局部下载一下.
首先cmd进入到我们的项目目录下.

[Shell] 纯文本查看 复制代码

npm install browser-sync  --save-dev

0x01
大改一下我们的gulpfile.js

[JavaScript] 纯文本查看 复制代码

var gulp = require('gulp');
var ejs = require('gulp-ejs')

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;


gulp.task('default', ['serve']);

//监听任务,监听如果有文件变动,触发reload任务
gulp.task("watch", function() {
    return gulp.watch(["./src/**/*.*"], ["reload"]);
});

//reload任务,执行之前调用html任务
gulp.task("reload", ['ejs'], function(cb) {
    return browserSync.reload();
});

//开启服务器任务,调用ejs和监听任务
gulp.task('serve', ['ejs', 'watch'], function() {
    browserSync.init({
        files: "./**/*",
        server: "./dist"
    });
});

//编译ejs模板任务
gulp.task('ejs', ["style"], function() {
    return gulp.src("./src/*.ejs")
        .pipe(ejs({ msg: 'Hello Gulp!' }, {}, { ext: '.html' }))
        .pipe(gulp.dest("./dist"))

})
//编译style样式
gulp.task('style', function() {
    return gulp.src('./src/**/*.css')
        .pipe(gulp.dest("./dist"))
})

任务越来越多,将来我们会将这些任务分离成很多个文件,现在我们暂时先这样.

好了 这个时候,我们去运行gulp.

铛铛,我们的任务就会一直保持运行在那,并且当我们修改文件的时候,浏览器也会自动帮我们刷新,实现了所写即所得.

你已经离一个高级前端不远了.