Gulp 用法

Gulp 的安裝部署

• 首先安裝 gulp

• 全局安裝gulp 命令行工具 npm i -g gulp-cli

• 全局安裝 npm i -g gulp

• 在項目的根目錄創建一個 gulpfile.js 的文件

Gulp 中的方法

• gulp.src()：獲取任務要處理的文件
• gulp.dest()：輸出文件
• gulp.task()： 建立 gulp任務
  • 參數一：任務的名稱
  • 參數二：任務的回掉函數
• gulp.watch()：監控文件發生的變化

const gulp = require('gulp') // 使用gulp.task() 方法建立任務 gulp.task('first', () => {// 獲取要處理的文件gulp.src('./src/css/base.css')// 將處理后的文件復制輸出到dist目錄.pipe(gulp.dest('./dist/css')) })

gulp 插件

• gulp-htmlmin：html文件壓縮
• gulp-csso：css壓縮
• gulp-babel：JavaScript語義轉化
• gulp-uglify： 壓縮混淆 Javascript
• gulp-file-include：公共文件包含
• browsersync：瀏覽器實時同步

gulp 代碼

html壓縮 抽取公共代碼

安裝 npm install gulp-htmlmin

安裝 npm install gulp-file-include

const gulp = require('gulp') const htmlmin = require('gulp-htmlmin') const fileinclude = require('gulp-file-include')// html任務 // 1.html文件中代碼的壓縮操作 // 2.抽取html文件中的公共代碼 gulp.task('htmlmin', () => {gulp.src('./src/*.html').pipe(fileinclude())// 壓縮html文件中的代碼.pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist')); });

轉載于:https://www.cnblogs.com/liea/p/11219228.html

總結

以上是生活随笔為你收集整理的Gulp的常见用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。