Gulp的使用

時間  2019-12-05
標籤 gulp 使用 欄目 JavaScript 简体版
原文   原文鏈接

什麼是項目構建?

  • 項目構建包括以下內容：javascript

    • 代碼轉換：將 TypeScript 編譯成JavaScript、將 LESS 編譯成 CSS等。
    • 文件優化：壓縮JavaScript、CSS、HTML 代碼，壓縮合並圖片等。
    • 代碼分割：提取多個頁面的公共代碼，提取首屏不須要執行部分代碼讓其異步記在。
    • 模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要經過構建功能將模塊分類合併成一個文件。
    • 自動刷新：監聽本地源代碼變化，自動從新構建、刷新瀏覽器。
    • 代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。
    • 自動發佈：更新代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。
  • 構建工具就是作以上這些事，將源代碼轉換成能夠執行的JavaScript、CSS、HTML 代碼。

構建環境的認識

  • 咱們對平時開發的代碼區分了兩種環境：css

    • 開發環境 developmenthtml

      • 自動編譯運行項目、檢查語法錯誤、詳細的錯誤提示等... （能幫助程序員更好的寫代碼, 在內存中編譯運行，沒有任何文件輸出）

    • 生產環境 production前端

      • 壓縮代碼、兼容性處理等...（生成打包後的項目文件，提供項目上線使用）

  • 而咱們使用的庫也分爲兩種依賴：java

    • 開發依賴 devDependenciesnode

      • 項目構建打包須要的依賴

    • 生產依賴 dependenciesgit

      • 項目上線運行時須要的依賴

gulp介紹

  • gulp中文網：https://www.gulpjs.com.cn/
  • gulp是與grunt功能相似的前端項目構建工具, 是基於nodejs平臺運行
  • 能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的
    合併、壓縮、檢查、監聽文件變化、瀏覽器自動刷新、測試等任務
  • gulp更高效(異步多任務), 更易於使用, 插件高質量
  • 使用gulp插件
  • 下文中使用的插件你均可以在npm或者gulp官網上找到具體的使用用法，我下面說作的配置都是基礎或者默認的，你也能夠自行配置

gulp開發套路

相關插件:

  • gulp-eslint : js文件語法檢查
  • gulp-babel: js語法轉換
  • gulp-browserify: 將commonjs模塊化轉換瀏覽器能識別的語法
  • gulp-connect: 用於運行網絡服務器的Gulp插件
  • open: 在用戶首選的應用程序中打開文件或URL
  • less-plugin-autoprefix: 使用autoprefixer從less轉換後爲css添加前綴。
  • gulp-concat : 合併文件(js/css)
  • gulp-uglify : 壓縮js文件
  • gulp-rename : 文件重命名
  • gulp-less : 編譯less
  • gulp-clean-css : 壓縮css
  • gulp-cssmin: 壓縮css
  • gulp-livereload : 實時自動編譯刷新

重要API

  • gulp.src(filePath/pathArr) :指向指定路徑的全部文件, 返回文件流對象,用於讀取文件
  • gulp.dest(dirPath/pathArr):指向指定的全部文件夾,用於向文件夾中輸出文件
  • gulp.task(name, [deps], fn):定義一個任務
  • gulp.watch() :監視文件的變化

* 安裝gulp

  • npm install gulp-cli -g 全局安裝
  • npm install gulp --save-dev 局部安裝

配置編碼: gulpfile.js

  • 將全部要配置的的代碼寫到裏面

處理js文件

一、js文件語法檢查

  • 準備工做：建立js文件es6

    • src/js/module1.js
    • src/js/module2.js
    • src/js/module3.js
    • src/js/main.js

  • 下載插件:github

    • npm install gulp-eslint --save-dev

  • 配置編碼

    const gulp = require('gulp');
const eslint = require('gulp-eslint');

// 語法檢查  必須有一個eslint的配置文件
gulp.task('eslint', function () {
// 讀取全部的js文件， 返回值就是一個可讀流
 return gulp.src(['src/js/*.js'])
  // 對流中的文件/數據進行語法檢查
   .pipe(eslint())
   .pipe(eslint.format())
   .pipe(eslint.failAfterError())
   .pipe(livereload());
})

  • 在package.json中配置eslint的檢查項

    "eslintConfig": {
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "module": true
    }
  }
}

//package.json文件內容，eslint的檢查項放置位置
 "author": "",
 "license": "ISC",
 "dependencies": {},
 "devDependencies": {},
 "eslintConfig": {
   "parserOptions": {
     "ecmaVersion": 7,
     "sourceType": "module",
     "ecmaFeatures": {
       "module": true
     }
   }
 }
  • 運行指令: gulp eslint

二、js語法轉換

  • 下載插件:

    • npm install --save-dev gulp-babel @babel/core @babel/preset-env

  • 配置編碼

    const babel = require('gulp-babel');

// babel能將es6模塊化語法轉換爲commonjs模塊化語法
// 能將es6及其以上的語法轉換爲es5及其如下的語法
gulp.task('babel', () =>
  // 讀取全部js文件
  gulp.src('src/js/*.js')
    // 進行語法轉換
   .pipe(babel({
     presets: ['@babel/preset-env'] //此處須要修改，官網有誤
 }))
   // 輸出出去，輸出路徑
   .pipe(gulp.dest('build/js'))   
);
  • 運行指令: gulp babel

三、將commonjs模塊化轉換瀏覽器能識別的語法

  • 下載插件:

    • npm install --save-dev gulp-browserify
    • 注意：這裏是將commonjs模塊化語法後的js文件轉換瀏覽器能識別的語法

  • 配置編碼

    const browserify = require('gulp-browserify');
  const rename = require("gulp-rename"); 
   //重命名文件，爲了避免與babel產生的文件命名起衝突，能夠保留banel產生的js文件

  gulp.task('browserify', function() {
   // 只要放入口文件
  return gulp.src('build/js/app.js')
    .pipe(browserify())
    // 重命名文件
    .pipe(rename("built.js"))
    .pipe(gulp.dest('build/js'))  
 });
  • 運行指令: gulp browserify

四、壓縮JS

  • 下載插件:

    • npm install --save-dev gulp-uglify

  • 配置編碼

    const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

gulp.task('uglify', function() {
  return gulp.src('./build/js/built.js')
    .pipe(uglify())
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('./dist/js/'))
});

gulp.task('js-prod', gulp.series('js-dev', 'uglify'));  //順序執行
  • 運行指令: gulp js-prod

處理less文件

  • 準備工做：建立less文件

    • src/less/test1.less
    • src/less/test2.less

1.將less編譯成css

  • 下載插件:

    • npm install gulp-less --save-dev

  • 配置編碼

    const less = require('gulp-less');

gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
   .pipe(less())
   .pipe(gulp.dest('./build/css')) 
});
  • 運行指令: gulp less

二、壓縮css

  • 下載插件

    • npm install gulp-clean-css less-plugin-autoprefix --save-dev

  • 配置編碼

    //第一種方案，採用gulp-clean-css
const cleanCSS = require('gulp-clean-css');
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });
const connect = require('gulp-connect');合併css文件

gulp.task('css', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({
      plugins: [autoprefix] //自動擴展樣式的兼容性前綴
    }))  //將less文件轉換成css文件
    .pipe(concat('dist.min.css'))  //合併css文件
    .pipe(cleanCSS({compatibility: 'ie8'}))  //壓縮css文件
    .pipe(gulp.dest('./dist/css'))
});

//第二種方案，採用gulp-cssmin
const cssmin = require('gulp-cssmin');合併css文件
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });
//與LessAutoprefix相配合，使用autoprefixer從less轉換後爲css添加前綴，由於有些瀏覽器對一些帶有前綴的css才能識別
const connect = require('gulp-connect');

gulp.task('css', function () {
 return gulp.src('./src/less/*.less')
  .pipe(concat('dist.min.css'))
  .pipe(less({
   plugins: [autoprefix]
  }))
  .pipe(cssmin())
  .pipe(gulp.dest('./dist/css'))
});
  • 運行指令: gulp css

處理html

1.壓縮html

  • 下載插件:

    • npm install gulp-htmlmin --save-dev

  • 配置編碼

    var htmlmin = require('gulp-htmlmin');
//壓縮html任務
gulp.task('html', () => {
return gulp.src('src/*.html')
  .pipe(htmlmin({
    collapseWhitespace: true, // 去除空格
    removeComments: true // 去掉註釋
  }))
  .pipe(gulp.dest('dist'));
});

  • 修改頁面引入

    <link rel="stylesheet" href="css/dist.min.css">
<script type="text/javascript" src="js/dist.min.js"></script>
  • 運行指令: gulp html

自動編譯代碼

  • 下載插件

    • npm install gulp-livereload --save-dev

  • 配置編碼:

    const livereload = require('gulp-livereload');
          
//全部的任務最後加上 .pipe(livereload()) 這條代碼決定自動編譯哪一個任務

gulp.task('watch', function() {
  livereload.listen();
  
  gulp.watch('src/less/*.less', gulp.series('less'));
  gulp.watch('src/js/*.js', gulp.series('js'));
});
  • 運行指令: gulp watch

自動打開/更新頁面（熱更新）

  • 下載插件

    • npm install gulp-connect open --save-dev

  • 配置編碼

    // 自動化 --> 自動編譯  --> 自動刷新瀏覽器（熱更新） --> 自動打開瀏覽器
  gulp.task('watch', function() {
    livereload.listen();
    // 開啓服務器
    connect.server({
      name: 'Dev App',
      root: ['build'], //提供服務的根路徑
      port: 3000,      //開啓端口號
      livereload: true  //是否實時刷新
    });
    // 自動打開瀏覽器,開啓連接
    open('http://localhost:3000');
    
    // 監視指定文件，一旦文件發生變化，就執行後面的任務
    gulp.watch('src/less/*.less', gulp.series('less'));
    gulp.watch('src/js/*.js', gulp.series('js-dev'));
  });
  • 運行指令: gulp watch

配置默認任務 --> 執行以上多個任務

//  gulp.series（）同步順序執行，同一時間只能執行一個任務  速度慢
  // gulp.parallel（）異步執行，同一時間執行多個任務   速度快
   gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); 
   gulp.task('js-prod', gulp.series('js-dev', 'uglify')); 
   gulp.task('build', gulp.parallel('js-dev', 'less'));
   
   // 生產環境的指令: gulp prod
   gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
   
   // 開發環境的指令： gulp start
   gulp.task('start', gulp.series('build', 'watch'));
個人文件目錄

avatar

下面是個人 gulpfile.js配置文件

// 引入gulp
const gulp = require('gulp');
const eslint = require('gulp-eslint');
const babel = require('gulp-babel');
const browserify = require('gulp-browserify');
const rename = require("gulp-rename");
const less = require('gulp-less');
const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const open = require("open");
const uglify = require('gulp-uglify');
const LessAutoprefix = require('less-plugin-autoprefix');
// https://github.com/browserslist/browserslist
const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] });
const cssmin = require('gulp-cssmin');
const concat = require('gulp-concat');
const htmlmin = require('gulp-htmlmin');


// 語法檢查  必須有一個eslint的配置文件
gulp.task('eslint', function () {
 // 讀取全部的js文件， 返回值就是一個可讀流
 return gulp.src(['src/js/*.js'])
   // 對流中的文件/數據進行語法檢查
   .pipe(eslint())
   .pipe(eslint.format())
   .pipe(eslint.failAfterError())
   .pipe(livereload());
})

// 語法轉換
// babel能將es6模塊化語法轉換爲commonjs模塊化語法
// 能將es6及其以上的語法轉換爲es5及其如下的語法
gulp.task('babel', () =>
 // 讀取全部js文件
 gulp.src('src/js/*.js')
   // 進行語法轉換
   .pipe(babel({
     presets: ['@babel/preset-env'] //此處須要修改，官網有誤
   }))
   // 輸出出去
   .pipe(gulp.dest('build/js'))
   .pipe(livereload())
);

// 將commonjs的模塊化語法轉換成瀏覽器能識別語法
gulp.task('browserify', function() {
 // 只要放入口文件
 return gulp.src('build/js/app.js')
   .pipe(browserify())
   // 重命名文件
   .pipe(rename("built.js"))
   .pipe(gulp.dest('build/js'))
   .pipe(livereload());
});

// 壓縮js代碼
gulp.task('uglify', function () {
 return gulp.src('./build/js/built.js')
   .pipe(uglify())
   .pipe(rename('dist.min.js'))
   .pipe(gulp.dest('dist/js'))
})

// 將less編譯成css
gulp.task('less', function () {
 return gulp.src('./src/less/*.less')
   .pipe(less())
   .pipe(gulp.dest('./build/css'))
   .pipe(livereload());
});

// 壓縮css
gulp.task('css', function () {
 return gulp.src('./src/less/*.less')
   .pipe(concat('dist.min.css'))
   .pipe(less({
     plugins: [autoprefix]
   }))
   .pipe(cssmin())
   .pipe(gulp.dest('./dist/css'))
});

// 壓縮html
gulp.task('html', () => {
 return gulp.src('src/*.html')
   .pipe(htmlmin({
     collapseWhitespace: true, // 去除空格
     removeComments: true // 去掉註釋
   }))
   .pipe(gulp.dest('dist'));
});

// 自動化 --> 自動編譯  --> 自動刷新瀏覽器（熱更新） --> 自動打開瀏覽器
gulp.task('watch', function() {
 livereload.listen();
 // 開啓服務器
 connect.server({
   name: 'Dev App',
   root: ['build'],
   port: 3000,
   livereload: true  //熱更新
 });
 // 打開瀏覽器
 open('http://localhost:3000');
 
 // 監視指定文件，一旦文件發生變化，就執行後面的任務
 gulp.watch('src/less/*.less', gulp.series('less'));
 gulp.watch('src/js/*.js', gulp.series('js-dev'));
});

// 配置默認任務 --> 執行以上多個任務
gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); 
gulp.task('js-prod', gulp.series('js-dev', 'uglify'));
// gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); 
gulp.task('build', gulp.parallel('js-dev', 'less'));
// 生產環境的指令: gulp prod
gulp.task('prod', gulp.parallel('js-prod', 'css', 'html'));
// 開發環境的指令： gulp start
gulp.task('start', gulp.series('build', 'watch'));
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程