gulp教程記錄

2021-08-20 02:45:46 字數 1950 閱讀 6558

gulp

gulp能夠做什麼東西？（以前這些工作都是人工做的）

等等。。

gulp的配置檔案gulpfile.js（其實整個gulp的配置檔案，基本上都是在做一些任務的配置，比如建立任務，監聽任務等等）

結合gulp的api

gulp只有5個方法

gulp的使用：

通過npm建立乙個專案

//我的叫做gulp-study，也就是建立乙個資料夾然後在當前資料夾下面執行npm init


//建立資料夾


mkdir gulp-study


//在當前資料夾執行npm init初始化專案


npm init
通過npm自動話構建需要的依賴

安裝完成後的package.json就是下面的樣子

,


"author": "lq",


"license": "mit",


"devdependencies": ,


"dependencies": 


}
很重要的一步 編寫gulpfile.js檔案（自動話構建就是根據這個檔案來）

//gulp是**由於配置的思想


//gulp只有5個方法，task，run，watch，src，和dest


//引入gulp


var gulp = require("gulp");


//引入元件


var jshint = require("gulp-jshint");


var sass = require("gulp-sass");


var less = require("gulp-less");


var concat = require("gulp-concat");


var uglify = require("gulp-uglify");


var minifycss = require("gulp-minify-css");


var rename = require("gulp-rename");


"src/js/*.js");


//建立乙個個任務編譯less


gulp.task('less',function());


//建立另外乙個任務用於檢查指令碼


gulp.task("lint",function());


//建立乙個任務用於合併壓縮檔案


gulp.task("scripts",function());


//預設任務


gulp.task('default', function());


// 監聽less檔案變化


gulp.watch('src/less/*.less', function());


});
我的專案結構如下：

上述完成編寫以後就是執行命令進行自動化構建了

//指的就是執行gulpfile.js中配置的default任務，當然也可以單獨執行其它的任務，例如gulp lint等等


gulp default
檔案改變後，檔案不會主動編譯問題，需要在控制台輸入enter鍵，移除了default任務中的run方法後改寫為如下形式就可以了

//預設任務


gulp.task('default', function());
上面寫法和下面寫法一樣

//預設任務


gulp.task('default', function());
構建中我遇到的問題：在執行自動話構建過程中失敗，報錯說是缺少了node-sass，安裝不成功，解決方式在如下鏈結中。

gulp教程之gulp中文API

1.1 說明 src方法是指定需要處理的原始檔的路徑，gulp借鑑了unix作業系統的管道 pipe 思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前檔案流至可用外掛程式 1.2 globs 需要處理的原始檔匹配符路徑。型別 必填 string or stringarray 萬用字...

gulp學習記錄

1.gulp的作用 以js為例，我們可能需要先把coffeescript轉譯成js，然後做一次語法檢查，然後再壓縮合併，最後才部署到生產。gulp就是用來把上述流程自動化的，並且現在像gulp和grunt這種工具一般都提供額外的實時重新整理伺服器，就是說，在開發過程中監視你的檔案改變，實時來幫你重新...

gulp入門教程

gulp是什麼？在前端開發中，你是否有遇到以下這些問題？1 需要手動合併雪碧圖 2 需要手動壓縮js css 3 每次編寫完 後，需要手動重新整理瀏覽器看效果 4 手動壓縮 gulp的主要作用就是幫助我們自動完成上面的那些繁瑣的工作。安裝gulp gulp是基於node.js的，所以你需要先安裝no...