gulp 入門使用

使用場景

相信大家在傳統的開發模式下 都是 html + css + js 然后靜態文件不經過任何處理 部署到服務器，這樣會有很多漏洞例如：

1.在網站上查看F12 就可以看到源代碼（可以篡改提交參數） 2.代碼高級語法不經過babel轉換，導致低版本瀏覽器無法正常解析 3.代碼不壓縮導致文件過大 等等等等。。。。 復制代碼

webpack 和 gulp 區別

gulp：強調的是前端開發的流程，通過配置一系列的task，定義task處理的事物（例如文件壓縮合并、雪碧圖、啟動server、 版本控制等），然后定義執行順序，來讓gulp執行task，從而構建前端項目的流程

webpack：是一個前端模塊化方案，側重模塊打包，把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。相同：可以文件合并與壓縮（css）不同點：雖然都是前端自動化構建工具，但看他們的定位就知道不是對等的。gulp嚴格上講，模塊化不是他強調的東西，他旨在規范前端開發流程。webpack更是明顯強調模塊化開發，而那些文件壓縮合并、預處理等功能，不過是他附帶的功能。

安裝

全局安裝 gulp：

$ npm install --global gulp 復制代碼

作為項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp 復制代碼

在項目根目錄下創建一個名為 gulpfile.js 的文件：

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

運行 gulp： $ gulp

文件Demo目錄結構

├── 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 復制代碼

.gulpfile.js編寫

var gulp = require('gulp'),htmlmin = require('gulp-htmlmin'),//壓縮html插件babel = require("gulp-babel"), // 用于ES6轉化ES5del = require('del'),//刪除文件插件cssmin = require("gulp-cssmin"),//css 壓縮插件less = require("gulp-less"),//less 轉css插件sass = require("gulp-sass"),//sass 轉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轉換 壓縮 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 () {// 將你的默認的任務代碼放在這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, //壓縮頁面JSminifyCSS: true //壓縮頁面CSS};return gulp.src('*.html').pipe(htmlmin(options)).pipe(gulp.dest('dist/')) }) gulp.task('default', gulp.series('clean', 'css', 'script', 'imgs', 'page'), function () {}); 復制代碼

執行gulp命令進行打包壓縮

gulp 復制代碼

打包后的代碼都是經過壓縮的

?

?

?

?

轉載于:https://www.cnblogs.com/richard1015/p/10784199.html

總結

以上是生活随笔為你收集整理的gulp 入门使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。