gulp學習 三 實戰

2022-09-10 14:12:26 字數 2294 閱讀 5161

前面兩節學習到gulp的基本知識,也知道gulp可以進行壓縮,監控,combo等等,這節進行實戰。由於gulp有很多外掛程式,所以我們不必重複造輪子,只用用好相關外掛程式就可以

某些時候我們會在本地安裝apache或者nginx當做靜態伺服器,有了gulp之後就不用了。gulp-connect外掛程式可以實現web伺服器功能

安裝gulp-connect:

npm install --s**e-dev gulp-connect
示例:

'use strict';

const gulp = require('gulp');

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

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

gulp.task('default',['server']);

執行命令gulp,然後終端會列印日誌如下:

[22:07:20] using gulpfile ~/webstormprojects/es6-doc/gulpfile.js

[22:07:20] starting 'server'...

[22:07:20] finished 'server' after 34 ms

[22:07:20] starting 'default'...

[22:07:20] finished 'default' after 7.53 μs

[22:07:20] server started http://localhost:8080

可以看出已經啟動了web伺服器。可以通過http://localhost:8080訪問。預設是訪問gulpfile.js所在目錄的index.html

省時的瀏覽器同步測試工具browsersync

摘自官網

rowsersync能讓瀏覽器實時、快速響應您的檔案更改(html、js、css、sass、less等)並自動重新整理頁面。更重要的是 browsersync可以同時在pc、平板、手機等裝置下進項除錯。您可以想象一下:「假設您的桌子上有pc、ipad、iphone、android等裝置,同時開啟了您需要除錯的頁面,當您使用browsersync後,您的任何一次**儲存,以上的裝置都會同時顯示您的改動」。無論您是前端還是後端工程師,使用它將提高您30%的工作效率。

安裝 gulp-uglify:

npm install --s**e-dev gulp-uglify
示例:

gulp.watch('js/*.js',['uglify_js']);

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

gulp.task('default',['uglify_js']);

上面這段**可以實現,當js文件下面的js檔案內容變化時,會被重新壓縮並輸出到目的目錄

安裝:

npm install --s**e-dev gulp-less
示例:

const gulp = require('gulp');

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

// 編譯less

// 在命令列輸入 gulp less 啟動此任務

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

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

gulp.task('auto', function () )

// 使用 gulp.task('default') 定義預設任務

// 在命令列使用 gulp 啟動 less 任務和 auto 任務

gulp.task('default', ['less', 'auto'])

上面**可以實現less檔案變化,編譯輸出到css資料夾下

另外還可以用gulp來編譯sass和壓縮以及combo檔案等等。可以自己去檢視

利用gulp構建專案

gulp學習記錄

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

gulp入門學習

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

gulp 入門學習

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