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更是明顯強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。

安裝

1. 全局安裝 gulp：

$ npm install --global gulp
複製代碼

2. 做爲項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp
複製代碼

3. 在項目根目錄下建立一個名爲 gulpfile.js 的文件：

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

4. 運行 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轉化ES5
    del = 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,  //壓縮HTML
        collapseBooleanAttributes: 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,  //壓縮頁面JS
        minifyCSS: 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
複製代碼

打包後的代碼都是通過壓縮的