gulp 入門學習

2022-02-25 10:35:07 字數 1172 閱讀 6836

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

gulp安裝

新建檔案目錄

開始構建專案

現有目錄:

└── src/

└── js/

└── a.js

任務:

找到src目錄下的js檔案下的js檔案

壓縮這些js檔案

壓縮後的**輸出到dist/js/目錄下

開始任務:

因為現在需要壓縮js檔案,所以需要安裝gulp-uglify模組

npm install gulp-uglify

在根目錄下新建並編輯gulpfile.js

gulpfile.js**如下

//獲取gulp

var gulp = require('gulp');

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

//壓縮js檔案

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

執行壓縮任務:

在命令列輸入 gulp script

在dist/js/下就能看壓縮後的檔案了。

實時更新壓縮檔案

//獲取gulp

var gulp = require('gulp');

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

//壓縮js檔案

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

//在命令列使用gulp啟動此任務

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

//在命令列 輸入gulp 等於輸入gulp default

//在此處會同時執行script任務和watchjs任務

gulp.task('default', ["script", "watchjs"]);

其他模組的使用也差不多類似。

gulp模組

參考鏈結

gulp 入門指南

高階

gulp入門學習

我們本該將更多的精力放在更有意義的事情上 所以,grunt gulp這一類構件工具出現了,將我們解救於重複的工作中。就自己的理解,自動化構件工具的核心是將我們的工作流抽離為乙個個任務 task 根據我們自己的需求,css的合併壓縮可以為乙個任務 js的合併壓縮可以為乙個任務 的壓縮也可以為乙個任務,...

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 模組 用於...