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...