學習gulp的簡單筆記。原教學視頻：https://www.bilibili.com/video/BV1NE411T7Z2?p=396。

gulp基本使用流程

初始化項目目錄：

cnpm init //或者改為npm指令

安裝到項目文件夾：

cnpm install gulp@3.9.1 --save-dev cnpm i gulp-scss gulp-minify-css gulp-rename -D //一次下載多個第三方插件

創建一個gulpfile.js文件

在gulpfile.js文件中編寫任務

(全局配置好命令行工具，之后會多出gulp命令行任務）

cnpm install gulp-cli -g

在控制臺通過 gulp 任務名 ，運行編寫好的任務

common.Js規范使用模塊

1.require() 將這個模塊引入

2.使用這個模塊上的函數

const gulp = require('gulp'); //引入一個gulp函數庫 //編寫第一個任務 //參數1：任務的名字，自定義 參數2：回調函數，任務執行的功能 gulp.task('hello',function(){ })

gulp基本函數

gulp.src() //找到源文件路徑 gulp.dest() //找到目標文件路徑，如果該文件路徑不存在則會自動創建 gulp.task() //建立gulp任務 gulp.watch() //監控文件的變化 .pipe() //理解程序運行管道 使用實例 const gulp = require('gulp'); //引入一個gulp函數庫 gulp.task('hello',function(){ //建立任務gulp.src("./src/css/base.css") //獲取要處理的文件.pipe(gulp.dest("./dist/css")); //放入指定文件夾 })

gulp使用監聽

gulp.task("watch",function(){gulp.watch() //第一個參數：文件監聽的路徑； 第二個參數：要執行的任務 })

gulp使用插件

網址：gulp插件

使用步驟：

<1> 下載插件到本地

cnpm install 插件名 --save-dev

<2>通過require() 引入文件

<3>查閱插件用法并使用

壓縮html (gulp-htmlmin)

壓縮css (gulp-csso)

重命名插件 (gulp-rename)

處理js文件插件

• gulp-conact 合并文件
• gulp-uglify 壓縮js 文件
• gulp-babel ES6=>ES5語法轉換

公共文件包含 (gulp-file-include)

啟動服務器 (gulp-connect)

const connect=require("gulp-connect"); gulp.task("server",function(){connect.server({root:"dist", //設置根目錄port:8000,//livereload:true //啟動實時刷新}) })

package.json文件

項目依賴：

在項目的開發階段和線上運營階段，都需要依賴的第三方包。

使用npm install 包名命令下載的文件會默認被添加到package.json文件的dependencies字段中。

重新安裝時使用 npm i --production 可以只下載項目依賴。

開發依賴：

在項目的開發階段需要依賴，線上運營階段不需要的第三方包。

使用npm install 包名 --save-dev命令將包添加到package.json文件的devDependencies字段中。

使用 npm install 會重新下載所有依賴。

package-lock.json

用于記錄模塊與模塊之間復雜的依賴關系。

• 鎖定包的版本，確保再次下載時不會因為包版本不同而產生問題。

• 加快下載速度，因為該文件中已經記錄了項目所依賴第三方包的樹狀結構和包的下載地址，重新安裝時只需下載即可。

一份我的gulpfile.js文件實例

//注意node和gulp版本，版本沖突可能會發生錯誤，我使用的是3.9.1版本gulp和10.22.0版本node const gulp=require('gulp'); const htmlmin=require('gulp-htmlmin'); const fileinclude=require('gulp-file-include'); const rename=require('gulp-rename'); const sass = require('gulp-sass'); const csso = require('gulp-csso'); const babel = require('gulp-babel'); const uglify = require('gulp-uglify'); const imgmin=require('gulp-imagemin'); const connect = require('gulp-connect');//報錯處理函數 function showError(error) {console.log(error.toString());this.emit('end'); } //html文件壓縮 gulp.task("htmlmin",function(){gulp.src("src/*.html").pipe(fileinclude()).on('error', showError).pipe(htmlmin({ collapseWhitespace: true })).on('error', showError).pipe(gulp.dest("./dist")); }) //css代碼壓縮 gulp.task("cssmin",function(){return gulp.src(["src/css/*.scss","src/css/*.css"]).pipe(sass()).on('error', showError).pipe(csso()).on('error', showError) /* .pipe(rename({suffix:".min"})) */.pipe(gulp.dest("./dist/css")); }) //js語法轉換及代碼壓縮 gulp.task('jsmin', function () {return gulp.src('./src/js/*.js').pipe(babel({//可以判斷當前代碼運行環境并將代碼轉化為當前運行環境支持的代碼presets: ['@babel/env']})).on('error', showError).pipe(uglify()).on('error', showError) /* .pipe(rename({suffix:".min"})) */.pipe(gulp.dest('./dist/js'));}) gulp.task('jsmin-module', function () {return gulp.src('./src/js/modules/*.js').pipe(babel({//可以判斷當前代碼運行環境并將代碼轉化為當前運行環境支持的代碼presets: ['@babel/env']})).on('error', showError).pipe(uglify()).on('error', showError) /* .pipe(rename({suffix:".min"})) */.pipe(gulp.dest('./dist/js/modules')); }) //圖片拷貝處理 gulp.task("images", function(){gulp.src('./src/img/*')//.pipe(imgmin()).pipe(gulp.dest("./dist/img")); }) //服務器任務 gulp.task("server", function () {connect.server({root: "./dist/",port: 5500,livereload: true}) }) //監聽任務 gulp.task("watch", function() {gulp.watch("./src/*.html", ["htmlmin"]);gulp.watch("./src/common/*.html", ["htmlmin"]);gulp.watch("./src/css/*.css",["cssmin"]);gulp.watch("./src/css/*.scss",["cssmin"]);gulp.watch("./src/js/*.js",["jsmin"]);gulp.watch("./src/js/modules/*.js",["jsmin-module"]);gulp.watch("./src/img/*", ["images"]); }) gulp.task("build",['htmlmin','cssmin','jsmin','jsmin-module','images','server',"watch"])

總結

以上是生活随笔為你收集整理的gulp学习笔记，基本使用流程，基本函数，使用监听、插件的全部內容，希望文章能夠幫你解決所遇到的問題。

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