gulp 入门使用

 

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
复制代码

1. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp
复制代码

1. 在项目根目录下创建一个名为 gulpfile.js 的文件：

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});
复制代码

1. 运行 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
复制代码

打包后的代码都是经过压缩的