gulp 前端构建工具使用

时间:2024-06-21 09:35:14

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插件

gulp 前端构建工具使用

npm install gulp

npm install browser-sync

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

gulp 前端构建工具使用

4.开始配置gulp

gulp 前端构建工具使用

gulp 前端构建工具使用

注意:Tasks  serve      选择node.exe