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

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