黑马程序员技术交流社区

标题: 【广州前端】人生苦短 05 gulp 前端开发效率远不止此 [打印本页]

作者: neekin    时间: 2018-1-4 16:57
标题: 【广州前端】人生苦短 05 gulp 前端开发效率远不止此
本帖最后由 neekin 于 2018-1-4 16:58 编辑

更多前端资源敬请关注

每次修改完一个文件后,居然要手动运行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.

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

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






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2