gulp怎样保留后自动革新？看这里就够了

2024年1月15日 235次阅读 来源: 小丑皇

gulp

运用gulp有段时候，之前由于事情比较忙，一向沉浸在webpack构建的项目中不能自拔，哎。。。说多了都是泪，终究有点时候了，能够增加这个功用并和人人分享了，以为好的话请点个赞，假如。。。。 毕竟入行时候不长，大神请包涵

假如没有gulp的运用履历的朋侪能够看看我的这篇文章gulp东西运用，大白话解说

想要gulp保留自动革新须要什么？

答：须要插件，须要gulp-connect这个插件，插件的细致引见人人能够上npm上搜刮一下（只需你不厌弃）。用我的话说这玩意就是能够在你当地启动一个效劳，然后当我们在源文件中保留的代码，那末浏览器就会自动革新，不必每次我们还得切换到浏览器手动革新，假如你是双显办公的，那末这味道叫一个爽字了得。

上代码

var connect = require('gulp-connect');  //起首须要在gukpfile.js中require这个插件，不要忘记了在项目中npm install

//这是gulp-connect插件的运用方法
/*
*port端口号
*livereload的值假如是false的话就是封闭及时更新
*/
gulp.task('connect', function () {
    connect.server({
        port:'3333',
        livereload: true
    });
});
gulp.task('default', ['connect', 'watch']);  //看到watch人人应该能猜到了，就是开启监听的意义

就如许？那你可就错了

实在单单如许写还没有完毕，由于你还没有通知gulp你要将这个革新在什么地方实行，比方

gulp.task('scripts',function(){
    gulp.src([paths.src_js])
    .pipe(babel({
        presets:['es2015']
    }))
    .pipe(gulp.dest(paths.dist_js)) //输出到指定文件夹
    .pipe(connect.reload())  //自动革新
    .pipe(notify({ message: 'Scripts is OK' })) //提示使命完成
)}
/*
*比方
*这是我的一个script使命，人人一定要记着在使命处理完后加上.pipe(connect.reload())
*/

当你设置好了文件以后就运用敕令 gulp 就Ok了，这是就会启动一个localhost:3333的效劳，这是你在进入你的编译后的文件目次比方localhost:3333/dist/index.html,这时候你修正了款式文件或许JS文件等浏览器就会及时革新。

这是另有一个坑，就是这个及时革新对启动效劳后新创建的文件是无效的。怎样邃晓呢？实在就是如许，比方我如今有一个JS的文件夹，内里只要一个index.js的文件，然后我输入敕令gulp启动了效劳，启动效劳以后我如今又创建了一个sub.js文件，那末如今这个sub.js文件经行了修正是不编译的,除非你停掉当前的效劳，然后重新启动一下。我也想处理这个题目，然则到目前为之还没有好的处理方案，假如有晓得的大神，也能够通知我一下，小弟在此谢谢了！

鄙人谈锋不太好，也不晓得人人究竟有无看邃晓。没紧要
github的项目地点，我已设置好了，而且在gulpfile.js中写了许多的解释，有兴致能够看看，以为不错的话请点一个START（这个项目dist是编译事后的文件,src是源文件），假如有题目的话也能够issues

    原文作者：小丑皇
    原文地址: https://segmentfault.com/a/1190000008591191
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞