點(diǎn)擊上方 毛利學(xué)python，選擇置頂或星標(biāo)
第一時間送達(dá)Python 技術(shù)干貨！

gulp

gulp是基于流的前端構(gòu)件化工具。gulp是自動化項(xiàng)目的構(gòu)建利器；不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成。同時使用非常簡單，學(xué)習(xí)成本低。這個壓縮工具也是前端必學(xué)的的工具。

環(huán)境搭建

• node
  因?yàn)閚pm跟隨node的包安裝管理工具。具體下載直接百度nodejs中文網(wǎng)，根據(jù)自身的環(huán)境（windows linux mac）下載安裝包（msi）。直接進(jìn)行安裝。

• npm install -g gulp
  安裝成功后就可以在命令行輸入gulp相關(guān)的命令了

安裝成功后，輸入gulp -v 查看版本

在項(xiàng)目中安裝 npm install --save-dev gulp，安裝成功后就可以開始寫配置文件了。

環(huán)境開發(fā)

• vscode
• nodejs
• gulp

gulp入門

npm init 項(xiàng)目初始化 ，此時根目錄會出現(xiàn)package.json

npm install gulp --save-dev 在本地項(xiàng)目局部安裝gulp

創(chuàng)建gulpfile.js文件

// 以下代碼會執(zhí)行在node環(huán)境下 var gulp = require( "gulp" );// 創(chuàng)建一個gulp的任務(wù) gulp.task( "default",function(done){console.log( "hello gulp" );done(); } );

在命令行執(zhí)行g(shù)ulp default

壓縮css

npm install gulp-cssnano --save -dev 在本地項(xiàng)目安裝gulp-cssnano

新建一個css文件夾，在新建index.css

*{margin: 0;padding: 0; }p{color: red }

gulpfile.js代碼如下

var gulp = require('gulp'); // 需要先安裝gulp-cssnano var cssnano = require('gulp-cssnano'); // 定義一個處理css文件改動的任務(wù)gulp.task('css',function(){gulp.src('./css/*.css').pipe(cssnano()) .pipe(gulp.dest("./dist/css/")) });

新建dist文件夾來存放生成的css任務(wù)

執(zhí)行 gulp css

在dist文件夾的css文件夾生成了index.css
*{margin:0;padding:0}p{color:red}
gulp 修改壓縮的文件名

npm install gulp-rename --save-dev 在本地項(xiàng)目安裝

gulpfile.js代碼修改如下

var gulp = require('gulp'); // 需要先安裝gulp-cssnano var cssnano = require('gulp-cssnano'); var rename = require('gulp-rename') // 定義一個處理css文件改動的任務(wù) gulp.task('css',function(){// 處理css文件的目錄return gulp.src('./css/*.css').pipe(cssnano()) // 將index.css生成index.min.css.pipe(rename({"suffix":".min"})).pipe(gulp.dest("./dist/css/")) });

執(zhí)行 gulp css，這樣將index.css命名為index.min.css

js壓縮

npm install gulp-uglify --save-dev 安裝js壓縮插件

同樣的道理新建js文件夾新建index.js

代碼是生成斐波那契數(shù)組

function getFibonacci(n) { var fibarr = [];var i = 0;while(i<n) {if(i<=1) {fibarr.push(i);}else{fibarr.push(fibarr[i-1] + fibarr[i-2])}i++;}return fibarr;}

gulpfile.js代碼修改如下

var gulp = require('gulp'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify')// 對js請求進(jìn)行壓縮和混淆 // 定義任務(wù) gulp.task('myscript', function() {// 1.匹配要處理的文件return gulp.src('src/js/*.js')// 2.將js代碼壓縮混淆.pipe(uglify()).pipe(rename({"suffix":".min"})).pipe(gulp.dest('./dist/js')) })

執(zhí)行 gulp myscript

index.min.js代碼就會壓縮

function getFibonacci(n){for(var r=[],u=0;u<n;)u<=1?r.push(u):r.push(r[u-1]+r[u-2]),u++;return r}

html 壓縮

npm install gulp-htmlmin --save-dev

新建html文件夾在新建index.html

gulpfile.js代碼修改如下

var gulp = require('gulp'); var rename = require('gulp-rename'); // 對html進(jìn)行壓縮的包 var htmlmin = require('gulp-htmlmin') // 對html進(jìn)行壓縮 // 定義任務(wù) gulp.task('myhtml', function(){// 1.匹配到要處理的html文件return gulp.src('./html/*.html')// 2.對html進(jìn)行壓縮!.pipe(htmlmin({collapseWhitespace:true // 去除空白符}))// 3.輸出.pipe(rename({"suffix":".min"})).pipe(gulp.dest('dist/html')) })

執(zhí)行 gulp myhtml

index.html就會被壓縮

使用gulp 壓縮代碼能使項(xiàng)目運(yùn)行更加的流暢。

總結(jié)

以上是生活随笔為你收集整理的前端开发使用工具 gulp的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。