gulp 前端构建工具使用

gulp 前端构建工具使用

1.新建一个web  h5项目

2.准备好gulpfile.js文件

（1）下载链接：https://pan.baidu.com/s/116J-BaYOMRzeJW3i_JZZOw

提取码：ec9b

（2）也可以创建一个这个文件，内容如下：

// http://www.gulpjs.com.cn/
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// 监视文件改动并重新载入
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: '.',
      index:"login.html"
    },
    port: 3000
  });
  gulp.watch(['*.html', 'css/**/*.css', 'js/**/*.js'], {cwd: ''}, reload);
});

说明：

index:对应的是系统要的首页

port:对外开饭的端口

gulp.watch加载的资源css js

3.把这个文件复制到项目的根目录下

4.在终端下载gulp插件

npm install gulp

npm install browser-sync

前提是nodejs环境是安装好的，而且在webstorm中配置好的

4.开始配置gulp

注意：Tasks  serve      选择node.exe