gulp的使用(二)

即时刷新

1.插件的安装--------npm install gulp-connect --save-dev
2.

var connect = require('gulp-connect');
gulp.task('load',function(){
    gulp.src('./html/index.html').pipe(
        gulp.dest('dist') // 拷贝到指定的目录
        ).pipe(connect.reload()); // 通知浏览器自启
});

创建本地服务器

gulp.task('server',function(){
      connect.server({
        root:'html',//服务器的根目录
        port:8080, //服务器的地址，没有此配置项默认也是 8080
        livereload:true//启用实时刷新的功能
    });
});

gulp—watch插件

监听指定的文件,如果发生变化就自动进行执行相应的操作
安装--------npm install gulp-watch --save-dev
gulp.series()------用于串行(顺序)执行
gulp.parallel()-----用于并行执行

监听html下的所有.html文件,如果发生了变化则通知浏览器实时刷新,显示内容

var connect = require('gulp-connect');
gulp.task('html',function(done){
     gulp.src('./html/index.html') //制定被刷新的html路径
     .pipe(connect.reload()); // 通知浏览器刷新
        done();
});

定义server任务,即服务器

gulp.task('server',function(){
    connect.server({
        root:'html',
        port:8080,
        livereload:true
    });
});

定义监听任务

var watch = require('gulp-watch');
gulp.task('watch',function(){
    watch('./html/*.html',gulp.series('html'));
});

合并所有的任务

gulp.task('default',gulp.parallel('watch','server','html'),function(){
    console.log('任务完成');
});

ES6模块化

export：它是用来定义模块的，可以导出对象、函数、类、字符串等等：
创建一个1.js文件
创建一个1.html
1.html：

<script type="module">
        import {a} from './1.js';
        console.log(a);  //100
    </script>

1.js：

export var a = 100；

引入的时候前面必须要加(./)当前路径，不加会报错。
如果要输出多个变量可以将这些变量包装成对象进行模块化输出：
1.html：

<script type="module">
        import {name,age,say} from './1.js';
        console.log(name);
        console.log(age);
        console.log(say());
    </script>

1.js：

var name = 'cl';
var age = '23';
function say(){
    return  '我是'+name+'我今年'+age;
}
export {    name,
            age,
            say
}

如果不想暴露变量的名字，可以用as，例如：
1.html：

<script type="module">
        import {name,c,say} from './1.js';
        console.log(name);
        console.log(c);
        console.log(say());
    </script>

1.js：

var name = 'cl';
var age = '23';
function say(){
    return  '我是'+name+'我今年'+age;
}
export {    name,
            age as c,
            say
}

import导入也可以通过as改名，例如：
1.html：

<script type="module">
        import * as info from './1.js';  // *代表1.js中导出的全部内容，不能直接输出*，必须改名
        console.log(info); //整个json对象
        console.log(info.name);
        console.log(info.age);
        console.log(info.say());
    </script>

1.js：

var name = 'cl';
var age = '23';
function say(){
    return  '我是'+name+'我今年'+age;
}
export {    name,
            age ,
            say
}

导出的方式还有另一种
export default {}
那么export和export default的区别就是：前者导出的东西需要在导入的时候加{}，而后者则不需要:

// 1.js
const a = 1;
const b = 2;
const c = 3;
export {a,b}
export default c;
// 1.html
<script type="module">
    import c,{a,b} from './1.js';  // 同时导入export和export default的时候，必须把默认的放在前面
    console.log(a,b,c);  // 1 2 3
</script>