gulp 入門使用

使用場(chǎng)景

相信大家在傳統(tǒng)的開(kāi)發(fā)模式下 都是 html + css + js 然后靜態(tài)文件不經(jīng)過(guò)任何處理 部署到服務(wù)器，這樣會(huì)有很多漏洞例如：

1.在網(wǎng)站上查看F12 就可以看到源代碼（可以篡改提交參數(shù)） 2.代碼高級(jí)語(yǔ)法不經(jīng)過(guò)babel轉(zhuǎn)換，導(dǎo)致低版本瀏覽器無(wú)法正常解析 3.代碼不壓縮導(dǎo)致文件過(guò)大 等等等等。。。。 復(fù)制代碼

webpack 和 gulp 區(qū)別

gulp：強(qiáng)調(diào)的是前端開(kāi)發(fā)的流程，通過(guò)配置一系列的task，定義task處理的事物（例如文件壓縮合并、雪碧圖、啟動(dòng)server、 版本控制等），然后定義執(zhí)行順序，來(lái)讓gulp執(zhí)行task，從而構(gòu)建前端項(xiàng)目的流程

webpack：是一個(gè)前端模塊化方案，側(cè)重模塊打包，把開(kāi)發(fā)中的所有資源（圖片、js文件、css文件等）都看成模塊，通過(guò)loader（加載器）和plugins（插件）對(duì)資源進(jìn)行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。相同：可以文件合并與壓縮（css）不同點(diǎn)：雖然都是前端自動(dòng)化構(gòu)建工具，但看他們的定位就知道不是對(duì)等的。gulp嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開(kāi)發(fā)流程。webpack更是明顯強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件壓縮合并、預(yù)處理等功能，不過(guò)是他附帶的功能。

安裝

全局安裝 gulp：

$ npm install --global gulp 復(fù)制代碼

作為項(xiàng)目的開(kāi)發(fā)依賴（devDependencies）安裝：

$ npm install --save-dev gulp 復(fù)制代碼

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：

gulp.task('default', function() {// 將你的默認(rèn)的任務(wù)代碼放在這 }); 復(fù)制代碼

運(yùn)行 gulp： $ gulp

文件Demo目錄結(jié)構(gòu)

├── css │ ├── index.css │ ├── lottery.css │ ├── perfectInformation.css │ ├── personal.css │ ├── reset.css │ └── vote.css ├── favicon.ico ├── gulpfile.js ├── imgs │ ├── 0.jpeg │ ├── bg1.png │ ├── bg2.png │ ├── default.png │ ├── down.png │ ├── editInfo.png │ ├── head_bg.png │ ├── homeIndex.png │ ├── index_bg.jpg │ ├── lottery │ │ ├── aoji.gif │ │ ├── bg-lottery.png │ │ ├── ly-plate-c.gif │ │ ├── playbtn-aoji.png │ │ └── playbtn.png │ ├── perfectInformation_bg.png │ ├── qrcode.png │ ├── search.png │ ├── voteIndex.png │ └── wx-share.png ├── index.html ├── lib │ ├── jquery-3.3.1.js │ ├── jquery.rotate.min.js │ ├── layer_mobile │ │ ├── layer.js │ │ └── need │ │ └── layer.css │ ├── qrcode.min.js │ ├── rem.js │ └── share.js ├── lottery.html ├── package-lock.json ├── package.json ├── perfectInformation.html ├── personal-share.html ├── personal.html ├── script │ ├── index.js │ ├── lottery.js │ ├── perfectInformation.js │ ├── personal-share.js │ ├── personal.js │ └── vote.js └── vote.html 復(fù)制代碼

.gulpfile.js編寫

var gulp = require('gulp'),htmlmin = require('gulp-htmlmin'),//壓縮html插件babel = require("gulp-babel"), // 用于ES6轉(zhuǎn)化ES5del = require('del'),//刪除文件插件cssmin = require("gulp-cssmin"),//css 壓縮插件less = require("gulp-less"),//less 轉(zhuǎn)css插件sass = require("gulp-sass"),//sass 轉(zhuǎn)css插件rename = require("gulp-rename"),//重命名插件uglify = require("gulp-uglify");//js 壓縮插件 //刪除dist文件夾 gulp.task('clean', function () {return del(['dist']) }) //css壓縮 gulp.task('css', function () {return gulp.src("./css/*.css").pipe(cssmin()).pipe(gulp.dest("./dist/css")); }); //less轉(zhuǎn)換 壓縮 gulp.task('less', function () {return gulp.src('./css/*.less').pipe(rename({suffix: '.min'})).pipe(less()).pipe(gulp.dest("./dist/css")); }); //圖片拷貝到指定目錄 gulp.task('imgs', function () {gulp.src("./lib/**/*").pipe(gulp.dest("./dist/lib/"));return gulp.src("./imgs/**/*").pipe(gulp.dest("./dist/imgs/")); }); //javascript壓縮 gulp.task('script', function () {//將第三方壓縮文件拷貝gulp.src("./script/*.min.js").pipe(gulp.dest("./dist/script"));gulp.src("./script/*.json").pipe(gulp.dest("./dist/script"));//壓縮非第三方min文件return gulp.src("./script/!(*.min)*.js").pipe(babel({presets: ['@babel/env']})).pipe(uglify()).pipe(gulp.dest("./dist/script")); }); //html壓縮 gulp.task('page', function () {// 將你的默認(rèn)的任務(wù)代碼放在這var options = {removeComments: true, //清除HTML注釋collapseWhitespace: true, //壓縮HTMLcollapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input checked />removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"minifyJS: true, //壓縮頁(yè)面JSminifyCSS: true //壓縮頁(yè)面CSS};return gulp.src('*.html').pipe(htmlmin(options)).pipe(gulp.dest('dist/')) }) gulp.task('default', gulp.series('clean', 'css', 'script', 'imgs', 'page'), function () {}); 復(fù)制代碼

執(zhí)行g(shù)ulp命令進(jìn)行打包壓縮

gulp 復(fù)制代碼

打包后的代碼都是經(jīng)過(guò)壓縮的

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/richard1015/p/10784199.html

總結(jié)

以上是生活随笔為你收集整理的gulp 入门使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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