gulp

參考：http://www.javashuo.com/article/p-brzpyauo-gk.html 或 http://www.javashuo.com/article/p-kcslfkjc-ee.html（推薦）

一、 node安裝好，經過npm全局安裝好gulp（全局安裝gulp是爲了執行gulp任務）。（要注意，全局安裝的gulp和本地gulp 會出現版本不兼容的問題，安裝差很少版本的就沒事）

二、 建立項目目錄，涉及到node的項目，在項目根目錄下必定要建立package.json（能夠手寫建立也能夠命令行輸入npm init建立；後面用到的node有關的插件，都會自動寫入這個文件中的）配置文件。

三、 而後在項目中安裝gulp依賴和gulp任務插件，須要用到什麼功能，就安裝對應的任務插件。（本地安裝gulp則是爲了調用gulp插件的功能）。如：cnpminstallgulp-htmlmin --save-dev ，其中 –save-dev 保存配置信息至 package.json 的 devDependencies 節點。 

四、 建立gulpfile.js配置文件（調用須要的gulp插件，配置了gulp的任務信息）.

五、 執行gulp任務

注意：在項目中安裝gulp插件，是在下載相應的插件文件。而後gulpfile.js中調用相應插件應用。

 

我的感悟：針對整個項目的打包壓縮使用webpack就行了，可是針對單個js文件的壓縮仍是使用 gulp 好。爲何要單獨對某一個js文件壓縮呢？

　　　　    若是多個項目 共用一個 js文件(本身開發的js文件，如JS-SDK.js文件)。這種文件，放在一個外網連接上比較好，改一份代碼，全部的項目就會同步修改了。

　　　　　這種代碼是不放在 項目中的，因此對他的壓縮，是單獨壓縮的。使用 在線 壓縮工具，有的在線壓縮工具會壓縮出問題來，因此使用gulp壓縮。

六、gulp 經常使用插件的功能和用法：https://github.com/lin-xin/blog/issues/2

七、gulp中的路徑能夠是絕對路徑，能夠是gulp目錄外的文件：（親測有效）

/* px 轉化爲 rem */
gulp.task('px2rem', function () {
  console.log('開始rem轉化');
  
  gulp.src('./src/css/*.css')
  .pipe(px2rem({'width_design':720,'valid_num':4,'pieces':10}))
  .pipe(gulp.dest('E:/代碼倉庫/united_h5/css'))  // 目標路徑 和 源文件路徑不在一個項目目錄下
});

八、gulp 監聽文件修改：http://www.javashuo.com/article/p-psfnxbha-gk.html

gulp.task('watch',function(){
  gulp.watch('./src/css/*.css',['px2rem']);  // px2rem 爲任務名稱
})

　　gulp監聽，有監聽事件。能夠在改變文件，監聽事件觸發，去執行一些功能，如刷新頁面。http://www.javashuo.com/article/p-fpmuhzmo-gc.html

gulp.task('server', function() {
  browserSync.init({
      server: {
          baseDir: 'E:/代碼倉庫/united_h5' // 指定項目文件夾
      }
  })
  gulp.watch(`./src/css/*.css`,['server', 'px2rem','html', 'browserSync']).on('change', browserSync.reload);
});

九、 return ：若是任務b須要依賴任務a的完成，那麼任務 a的task方法須要使用return返回stream  http://www.javashuo.com/article/p-kcslfkjc-ee.html

十、gulp的task順序執行：https://segmentfault.com/q/1010000003038517?sort=created

十一、使用gulp時經常使用的插件介紹及用法：http://www.javashuo.com/article/p-gtlbybid-h.html

---

 任務：（須要插件）

一、壓縮js文件（gulp-uglify）：

  gulp.src('js/*.js')
  .pipe(uglify()) // 啓用默認的壓縮設置
  .pipe(gulp.dest('dist'))

     壓縮參數：https://segmentfault.com/q/1010000015842986（去掉console）

  gulp.src('js/*.js')
  .pipe(uglify({
    compress: {
      drop_console: true,  // 過濾 console
    }
  }))
  .pipe(gulp.dest('dist'))

二、px轉rem---gulp插件（）：https://zhuanlan.zhihu.com/p/22825560 或 https://www.npmjs.com/package/gulp-px2rem-plugin

.pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10}))

　 讓部分px不在轉換成rem 、部分選擇器不在轉換爲rem： ignore_px 、 ignore_selector

三、gulp文件自動添加 hash值（防緩存）：https://www.jianshu.com/p/164344f8e2ac  或  https://raoenhui.github.io/js/2019/03/03/gulp/（親測有效）或 https://www.jianshu.com/p/dc81dadbf243（推薦 一步到位）

　  說明：browser-sync自動刷新不會從緩存獲取（browserSync.reload 的刷新刷新，應該的是相似Shift+F5的刷新），本地開發基本不會出現文件緩存問題。可是用戶那裏，是會出現緩存問題的。（下面給文件生成了hash，可是舊有的文件，沒有刪除）

    //CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){    
  return gulp.src('./src/css/*.css')        
            // .pipe(gulp.dest('dist')) // 將源文件拷貝到打包目錄
            .pipe(rev())  
            .pipe(gulp.dest('dist')) // 將生成的hash文件添加到打包目錄
            .pipe(rev.manifest('css-rev.json'))
            .pipe(gulp.dest('dist')) // 將map映射文件添加到打包目錄
});
//Html更換css
gulp.task('html', () => {
  const cssManifest = gulp.src('dist/css-rev.json'); //獲取css映射文件
  return gulp.src('./src/*.html')
    .pipe(revRewrite({manifest: cssManifest})) // 把引用的css替換成有版本號的名字
    .pipe(gulp.dest('dist'))
});

四、自動刷新頁面（browser-sync）：https://www.liuchang.org/gulp-xiu-gai-wen-jian-browser-sync-zi-dong-shua-xin-liu-lan-qi/  或  http://www.yanjiazhen.com/2016/10/gulp-refresh.html

 　  自動刷新頁面原理：gulp運行了一個微型服務器（本身的服務器才能控制它自動刷新）。運行時，自動打開瀏覽器頁面。

// 引入瀏覽器刷新插件
var browserSync = require('browser-sync');

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: 'app' // 指定項目文件夾
        }
    })
});

　　去掉更新成功的 Connected to BrowserSync 提示：http://www.javashuo.com/article/p-uykozbsa-ew.html   （ #__bs_notify__{  display: none!important;  }）

五、代理跨域（http-proxy-middleware）：https://blog.csdn.net/weixin_34372728/article/details/93874406  或  https://segmentfault.com/q/1010000015320070/revision

gulp.task('server', function() {
  var jsonPlaceholderProxy = proxy('/api',{
    target: 'https://test.iconntech.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
      }
  })
  browserSync.init({
      server: {
          baseDir: 'E:/代碼倉庫/united_h5', // 指定項目文件夾
          middleware: [jsonPlaceholderProxy] // 代理中間件
      }
  })
});

六、編譯less 文件 ：https://www.kancloud.cn/thinkphp/gulp-guide/43999 （下面本身增長了一個px轉化爲rem的過程）

// 編譯less
gulp.task('less', function () {
  // 1. 找到 less 文件
  gulp.src('src/less/*.less')
  // 2. 編譯爲css
      .pipe(less())
  // 3. 將css中px轉化爲rem 
      .pipe(px2rem({'width_design':720,'valid_num':4,'pieces':10}))
  // 4. 另存文件
      .pipe(gulp.dest('E:/代碼倉庫/united_h5/css'))
});

八、結合起來使用，監聽文件修改、編譯、刷新頁面：https://www.jianshu.com/p/449606cdf989  或  http://www.javashuo.com/article/p-fpmuhzmo-gc.html（推薦）

var gulp = require('gulp')
var px2rem = require('gulp-px2rem-plugin')
// 引入瀏覽器刷新插件
let browserSync = require('browser-sync').create();

/* px 轉化爲 rem */
gulp.task('px2rem', function () {
  console.log('開始rem轉化');
  
  gulp.src('./src/css/*.css')
  .pipe(px2rem({'width_design':720,'valid_num':4,'pieces':10}))
  .pipe(gulp.dest('E:/代碼倉庫/united_h5/css'))
  // .pipe(gulp.dest('E:/代碼倉庫/united_h5/css'))
});

gulp.task('server', function() {
  browserSync.init({
      server: {
          baseDir: 'E:/代碼倉庫/united_h5' // 指定項目文件夾
      }
  })
  gulp.watch(`./src/css/*.css`,['px2rem']).on('change', browserSync.reload);
});

View Code

九、gulp 不能 編譯 壓縮 es6的語法，否則會報錯，解決方案：https://www.iteye.com/blog/skyuck-2443055  或 http://www.ptbird.cn/gulp-babel-es6.html（在壓縮js文件前，用 babel 插件，轉換成es5 語法就能夠了） 

　　使用 gulp-babel 插件要注意版本的問題。

var gulp = require('gulp')
var uglify = require('gulp-uglify')
var babel = require('gulp-babel'); // 添加這段代碼
var es2015Preset = require("babel-preset-es2015");

gulp.task('pressJs2', function () {
  console.log('開始js文件壓縮');
  gulp.src('src/js/evaluate.js')
  .pipe(babel({presets: [es2015Preset]}))
  .pipe(uglify())
  .pipe(gulp.dest('dist/js'))
});

 

 

 

gulp 和 webpack 的區別：https://www.jianshu.com/p/6e3b28eeabb3

　　我的理解：他們是區別就是，gulp是針對一個一個文件獨自處理的，文件內引入的文件是不會作處理的。好比 js 文件，引入的其它js文件； css 文件內，引入的圖片。

　　　　　　　可是 webpack 能夠，將全部依賴關聯的文件進行處理。