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