gulp 自動化構建html項目--自動刷新

    使用gulp自動化構建項目是前端學習的重要部分，gulp依賴於node.js.首選電腦要配置node和npm。

　　查看node版本號

    node --version

　　查看npm 版本

  npm --version

　　1、安裝gulp

　　一、全局安裝gulp

   npm install gulp –g

---

 　　個人項目結構以下圖

　　　　

二、在根文件夾下使用 npm init 

　　

　　一直回車直到OK？輸入yes回車 會出現一個文件package.json（這裏示例根文件夾爲gulp-app）

       三、配置項目的gulp環境，在根目錄打開終端或者cmd：

    npm install gulp --save-dev

　　成功後會在package.json中存在gulp配置，注意：這裏的gulp版本必須和你的全局gulp版本一致，以下圖

　　　　

　　四、安裝插件

　　這些是須要在項目中使用的插件，可能你還須要其餘插件，能夠在gulp文檔自行安裝（文檔地址：https://www.gulpjs.com.cn/docs/getting-started/quick-start/）

  npm isntall end-of-stream --save-dev
  npm isntall gulp-autoprefixer --save-dev
  npm isntall gulp-clean --save-dev
  npm isntall gulp-concat-dir --save-dev
  npm isntall gulp-connect --save-dev
  npm isntall gulp-imagemin --save-dev
  npm isntall gulp-less --save-dev
  npm isntall gulp-livereload --save-dev
  npm isntall gulp-minify-css --save-dev
  npm isntall gulp-minify-html --save-dev
  npm isntall gulp-plumber --save-dev
  npm isntall gulp-run-sequence --save-dev
  npm isntall gulp-uglify --save-dev
  npm isntall gulp-zip --save-dev
  npm isntall opn --save-dev

　　　

　2、在根目錄gulp-app下建立gulpfile.js。js文件裏面內容以下

//使用require引入全部須要的模塊，Gulp.js是基於Node.js構建的
//由於Node.js遵循CommondJS規範
//CommondJS其中有一個Modules規範，使其能夠以同步的模式加載模塊
var gulp = require('gulp'),
  //壓縮js
  uglify = require('gulp-uglify'),
  //編譯Less
  less = require('gulp-less'),
  //壓縮css
  minifyCss = require('gulp-minify-css'),
  //自動前綴補全
  autoprefixer = require('gulp-autoprefixer'),
  //壓縮HTML
  minifyHtml = require('gulp-minify-html'),
  //壓縮圖片
  imagemin = require('gulp-imagemin'),
  //管合併，能夠合併同一目錄下的全部文件，好處是能夠減小網絡請求
  concat = require('gulp-concat-dir'),
  //錯誤處理提示插件
  plumber = require('gulp-plumber'),
  //壓縮文件
  zip = require('gulp-zip'),

  connect = require('gulp-connect'),


  //控制task中的串行和並行。（gulp默認是並行）
  //串行是指多個任務時，各個任務按順序執行，完成一個以後才能進行下一個。
  //並行指的是多個任務能夠同時執行。
  runSequence = require('gulp-run-sequence'),
  //用來刪除文件
  clean = require('gulp-clean');



  //建立一個名爲default的任務（上面的任務均可以沒有，可是這個任務必須有，否則在終端執行gulp命令會報錯）
//在終端上輸入gulp命令，會默認執行default任務，並執行redist任務
gulp.task('default', ['redist'],function () {
    gulp.start('server');
});
// 本地調試環境local
gulp.task('server', ['build', 'watch'], function () {
	connect.server({
		root: 'dist',
		port: 8000,
		livereload: true
	});
 
	require('opn')('http://localhost:8000');
});

gulp.task('build', ['js', 'images', 'less', 'public', 'html']);


//建立一個名爲js的任務
gulp.task('js', function(){
  // 首先取得app/static/scripts下的全部爲.js的文件（**/的意思是包含全部子文件夾)
  return gulp.src('app/static/scripts/**/*.js')
    .pipe(connect.reload()) //從新加載
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //合併同一目錄下的全部文件,並將合併的目錄名做爲合併後的文件名
    .pipe(concat({ext: '.js'}))
    //js壓縮
    .pipe(uglify())
    //將合併壓縮後的文件輸出到dist/static/scripts下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/static/scripts'))
});


//建立一個名爲less的任務
gulp.task('less', function(){
  // 首先取得app/static/less下的全部爲.less的文件（**/的意思是包含全部子文件夾)
  return gulp.src('app/static/less/**/*.less')
    .pipe(connect.reload()) //從新加載
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //編譯less文件使其轉換爲css文件
    .pipe(less())
    //前綴自動補全插件
    .pipe(autoprefixer())
    //合併同一目錄下的全部文件,並將合併的目錄名做爲合併後的文件名
    .pipe(concat({ext: '.css'}))
    //css壓縮
    .pipe(minifyCss())
    //將合併壓縮後的文件輸出到dist/static/css下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/static/css'))
});

//建立一個名爲html的任務
gulp.task('html', function(){
  // 首先取得app/views下的全部爲.html的文件（**/的意思是包含全部子文件夾)
  return gulp.src('app/views/**/*.html')
    .pipe(connect.reload()) //從新加載
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //html壓縮
    .pipe(minifyHtml())
    //將壓縮後的文件輸出到dist/views下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/views'))
});


//建立一個名爲images的任務
gulp.task('images', function(){
  // 首先取得app/static/images下的全部爲.{png,jpg,jpeg,ico,gif,svg}後綴的圖片文件（**/的意思是包含全部子文件夾)
  return gulp.src('app/static/images/**/*.{png,jpg,jpeg,ico,gif,svg}')
    .pipe(connect.reload()) //從新加載
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    .pipe(imagemin({
      optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
      progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
      interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
      multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化
    }))
    //將壓縮後的圖片輸出到dist/static/images下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/static/images'))
});

//建立一個名爲clean的任務
gulp.task('clean', function(){
  // 首先取得dist/*下的全部文件
  return gulp.src('dist/*', {read: false})
    //刪除dist/*下的全部文件
    .pipe(clean())
})


//建立一個名爲public的任務
gulp.task('public', function(){
  // 首先取得dist/*下的全部文件
  return gulp.src('dist/**/*')
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //將dist/*下的全部文件進行壓縮打包生成爲public.zip文件
    .pipe(zip('public.zip'))
    //將生成的public.zip文件輸出到release下（假如沒有release目錄則自動生成release目錄）
    .pipe(gulp.dest('release'))
    
})

//建立一個名爲watch的任務
gulp.task('watch',['build'], function(){
  //監聽各個目錄的文件，若是有變更則執行相應的任務操做文件
  gulp.watch('app/static/scripts/**/*.js',['js']);
  gulp.watch('app/static/less/**/*.less',['less']);
  gulp.watch('app/views/**/*.html',['html']);
})
//建立一個名爲redist的任務
gulp.task('redist', function(){
  //先運行clean，而後並行運行html,js,less,images,watch
  //若是不使用gulp-run-sequence插件的話，因爲gulp是並行執行的
  //有可能會出現一種狀況（其餘文件處理速度快的已經處理完了，而後clean最後才執行，會把前面處理完的文件刪掉，因此要用到runSequence）
  runSequence('clean', ['html', 'less', 'js', 'images', 'watch'])
})

　　在app==>views文件將愛下建立index.html 

　　以後在根目錄運行    gulp命令。會自動在瀏覽器打開http://localhost:8000/

 　　

　　點擊views會看到index.html界面，修改app內的內容保存後會自動刷新