gulp入門學習

2021-09-19 09:07:46 字數 804 閱讀 8006

我們本該將更多的精力放在更有意義的事情上

所以,grunt、gulp這一類構件工具出現了,將我們解救於重複的工作中。就自己的理解,自動化構件工具的核心是將我們的工作流抽離為乙個個任務(task),根據我們自己的需求,css的合併壓縮可以為乙個任務、js的合併壓縮可以為乙個任務、的壓縮也可以為乙個任務,我們可以將上線前對靜態資源的操作分成以上三個任務。最後,我們只需要執行乙個命令,這些任務就會自動執行。再加上對每個檔案變化的監聽,每次檔案的修改都會觸發自動構建。媽媽再也不擔心我們做重複的事情了,是不是倍兒爽?

對於我,學習乙個新的工具,首先是用起來。

const gulp = require('gulp');

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

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

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

gulp.task('min:css', function () ))

.pipe(gulp.dest('dist/css'));

});gulp.task('min:js', function () ))

.pipe(gulp.dest('dist/js'));

});gulp.task('default', ['min:js', 'min:css']);

根據以上步驟,gulp基本使用起來了。

本章原始碼託管於github/demo-gulp,希望能對gulp初學者有幫助。

gulp 入門學習

想學習一下怎麼使用gulp,找了幾篇部落格,一開始就放大招,js壓縮,css壓縮,sass編譯,less編譯,拼接等等全堆積上來。對於我這種之前沒接觸過任務自動管理工具的人來說,感覺像看電影快進一樣,只要中途有不理解的就要斷篇。gulp安裝 新建檔案目錄 開始構建專案 現有目錄 src js a.j...

gulp 入門 使用gulp壓縮css

壓縮 css 可降低 css 檔案大小,提高頁面開啟速度。規律轉換為 gulp 找到css 目錄下的所有 css 檔案,壓縮它們,將壓縮後的檔案存放在dist css 目錄下。一 安裝 gulp minify css 模組 在命令列輸入sudo npm install gulp minify css...

gulp基本入門

gulp是乙個前端自動化構建的乙個工具 1.前置 1.1在使用gulp之前,先安裝node和npm 2.安裝gulp 2.1 npm install gulp 3.打包專案 3.1 新建gulpfile.js 獲取 gulp var gulp require gulp 獲取 uglify 模組 用於...