webpack和gulp的区别

gulp介绍

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

gulp安装

1、安装node 安装 方法请自行百度
2、全局安装gulp

1 2 3 4

然而由于众所周知的原因，国内到 npm 服务器的连接很不稳定,所有这里推荐一个简单的方案使用淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 接下来全局安装gulp cnpm i gulp -g

gulp相关插件的介绍

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

gulp插件用法比较简单,下面主要介绍一下一些插件的用途 1、del 删除文件，用于清空文件 2、browser-sync 用于自动刷新浏览器，从此再也不用F5手动刷新了 3、gulp-htmlmin 用于压缩html 4、gulp-clean-css 压缩css 5、gulp-uglify 压缩js 6、gulp-replace 替换路径 7、gulp-base64 将小图背景图转为base64的形式，可以自己设置最大多少尺寸转为base64 8、gulp-imagemin 压缩图片大小，不过效果不明显，还需要自己再处理一下图片 其他想用的插件可以自己去找，基本可以项目的需要，不够就去加就行

个人配置希望帮助到大家

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118

const gulp = require('gulp'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); const babel = require('gulp-babel'); const sourcemaps = require('gulp-sourcemaps'); const cssmin = require('gulp-cssmin'); const imagemin = require('gulp-imagemin'); const htmlmin = require('gulp-htmlmin'); const connect = require('gulp-connect'); const clean = require('gulp-clean'); const revCollector = require('gulp-rev-collector'); const js_path = ['./src/js/**/*.js']; // 压缩html gulp.task('html', function() {     const options = {         collapseWhitespace: true,         collapseBooleanAttributes: true,         removeComments: true,         removeEmptyAttributes: true, //清除所有的空属性         removeScriptTypeAttributes: true,         removeStyleLinkTypeAttributes: true,         minifyJS: true, //压缩html中的javascript代码。         minifyCSS: true //压缩html中的css代码。     };     return gulp.src('./*.html')         .pipe(htmlmin(options))         .pipe(revCollector({             replaceReved: true         }))         .pipe(gulp.dest('./dist'))         .pipe(connect.reload()); }) // 压缩js gulp.task('js', () => {     return gulp.src('./js/*.js')         .pipe(sourcemaps.init())         // babel编译         .pipe(babel({             presets: ['@babel/env']         }))         // concat会作合并，合并为1个js         .pipe(concat('bundle.min.js'))         .pipe(uglify())         .pipe(sourcemaps.write())         .pipe(gulp.dest('./dist/js/'))         .pipe(connect.reload()); }); // 压缩style-css gulp.task('style', () => {     return gulp         .src(['./css/**/*.css'])         .pipe(concat('style.min.css'))         // cssmin css压缩         .pipe(cssmin())         .pipe(gulp.dest('./dist/css/'))         .pipe(connect.reload()); }); // 压缩images gulp.task('images', () => {     return gulp         .src(['./images/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])         .pipe(imagemin([             imagemin.gifsicle({ interlaced: true }),             imagemin.jpegtran({ propressive: true }),             imagemin.optipng({ optimizationLevel: 5 })         ]))         .pipe(gulp.dest('./dist/img/')); }); gulp.task('watchs', function() {     gulp.watch('./*.html', gulp.series('html'));     gulp.watch('./css/**/*.css', gulp.series('style'));     gulp.watch('./js/**/*.js', gulp.series('js')); }); gulp.task('connect:app', function() {     connect.server({         root: 'src', //根目录         // ip:'192.168.3.162', 默认localhost         livereload: true, //自动更新         port: 9999 //端口     }) }) gulp.task('connect:dist', function(cb) {     connect.server({         root: 'src',         livereload: true,         port: 9999     })     cb(); //执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务 }) gulp.task('clean:app', function() {     return gulp.src('dist', { read: false })         .pipe(clean()); }) //gulp.series|4.0 依赖顺序执行 //gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行 gulp.task('default', gulp.series(gulp.parallel('html', 'style', 'js', 'images'))); gulp.task('init', gulp.series('clean:app', gulp.parallel('html', 'style', 'js', 'images'))); //启动任务connect:app服务，并监控变化 gulp.task('dev', gulp.series('init', 'connect:app', 'watchs')); // 生成打包文件 gulp.task('build', gulp.series('init')); //启动任务connect:dist服务，生成打包文件后，监控其变化 gulp.task('server', gulp.series('connect:dist', 'build', 'watchs'))

package.json信息

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

{     "name": "gulp",     "version": "1.0.0",     "description": "",     "main": "index.js",     "scripts": {         "dev": "gulp dev",         "build": "gulp build",         "server": "gulp server"     },     "author": "handsome",     "license": "ISC",     "dependencies": {         "@babel/core": "^7.4.5",         "@babel/preset-env": "^7.4.5",         "gulp": "^4.0.2",         "gulp-babel": "^8.0.0",         "gulp-clean": "^0.4.0",         "gulp-concat": "^2.6.1",         "gulp-connect": "^5.7.0",         "gulp-cssmin": "^0.2.0",         "gulp-htmlmin": "^5.0.1",         "gulp-imagemin": "^6.0.0",         "gulp-rev-collector": "^1.3.1",         "gulp-sourcemaps": "^2.6.5",         "gulp-uglify": "^3.0.2"     } }

1.gulp是工具链、构建工具。可以配合各种插件做js压缩，css压缩，less编译等，可以替代手工实现自动化工作。

而webpack是文件打包工具，可以把项目的各种js文件、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案。

2.在定义和使用类比中两者都有各的用途，同时webpack为初级编译程序，gulp为高级编译程序，在功能上要比webpack应用程序中多。

3.webpack可以很方便使用node_module、es6或者样式注入等功能，作为最初级的功能定位性价比最高，webpack输入输出都以js为主，对html兼顾较少，可用组件不多很难达到可用的程度。

gulp在编程方面较为复杂，但是可用的组件也会更多，手动编译的情况下耗时较长，同时此软件不适合初级入门者使用。