gulp使用，gulp和webpack的对比

秦英发

2023-12-01

1.gulp使用

gulp 是基于 Node.js 的一个前端自动化构建工具，主要用来设定程序自动处理静态资源的工作，您可以使用它构建自动化工作流程（前端集成开发环境），在 Web 前端开发工作中有很多“重复工作”，例如：网页自动刷新，CSS预处理，代码检测，图片压缩等功能，编写gulp配置，可以让gulp自动执行这些“重复工作”，只需要简单的命令行就可以全部完成。使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。

1.1gulp安装

首先确保你已经正确安装了nodejs环境，然后以全局方式安装gulp环境

npm install -g gulp

然后切换到你的项目文件夹中，为项目单独安装gulp开发依赖

npm install gulp --save-dev

1.2gulp配置和使用

首先在gulp项目目录下创建gulp的配置文件gulpfile.js，之后在这个文件中定义我们的gulp任务

var glup=require("gulp");//引入gulp模块

gulp的使用流程一般是：

首先通过gulp.task()注册任务
通过gulp.src()方法获取到想要处理的文件流
然后把文件流通过pipe方法导入到gulp的插件中
最后把经过插件处理后的流在通过pipe方法导入到gulp.dest()中
gulp.dest()方法则把流中的内容写入到文件中。

1.3gulp提供的API：

注册任务

gulp.task(name[,deps],fn)

参数：
name是任务名称，执行任务时，使用这个名称
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。
如果没有依赖，则可省略这个参数
fn是一个回掉函数，代表这个任务要做的事情

读取文件
将本地文件读取到gulp内存中

gulp.src(globs[, options])

参数：
globs是读取目标源文件的路径
opttions是一个可配置对象通常不需要用到

输出到文件
将内存中数据输出到本地文件中

gulp.dest(path[,options])

参数：
path是将数据输出目标文件路径
opttions是一个可配置对象通常不需要用到

监视文件变化
用来监视某个或某些文件发生变化，可以在变化的时候，执行一个回掉函数，利用它来执行相应的任务

 gulp.watch(globs[,opts]),tasks);

globs是要监视的文件匹配模式，规则和用法与gulp.src方法中的glob相同
opts是一个可配置对象通常不需要用到
tasks是文件变化后要执行的任务，为一个数组

1.4gulp插件

我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中。

1.4.1插件下载：

npm install 插件名 --save-dev
gulp-concat : 合并文件(js/css)
gulp-uglify : 压缩js文件
gulp-rename : 文件重命名
gulp-less : 编译less
gulp-sass：编译sass
gulp-clean-css : 压缩css文件
gulp-livereload : 实时自动编译刷新
gulp-htmlmin：压缩html文件
gulp-connect：热加载，配置一个服务器
gulp-load-plugins：打包插件（里面包含了其他所有插件）

1.4.2使用插件：

通过 npm install 插件名 --save-dev 安装插件到当前的项目
可以在gulpfile.js顶部通过require引入此插件
也可以在创建任务的时候使用 gulp-load-plugins插件这个插件会自动帮你加载package.json文件里的gulp插件，不需要每个依次引入
在gulpfile.js声明

const gulp = require("gulp"); //引入gulp模块
const $ = require("gulp-load-plugins")(); //引入gulp-load-plugins

在使用过中，不需要使用require依次引入每一个插件，直接使用$.插件名称()的效果与require效果一致

合并文件： gulp-concat

gulp.task('concat-js',function(){
    return gulp.src('app/!*.js') //合并的文件
         .pipe(concat('all.js')) //执行合并
         .pipe(gulp.dest('dist/js')) //输出文件
})

编译Sass： gulp-sass

gulp.task('sass-css',function(){
   return gulp.src('app/sass/!*.sass') //编译的文件
        .pipe(sass()) //执行编译
        .pipe(gulp.dest('dist/css')) //输出文件
})

编译less： gulp-less

gulp.task('less-css',function(){
   return gulp.src('app/less/!*.less') //编译的文件
        .pipe(less()) //执行编译
        .pipe(gulp.dest('dist/css'); //输出文件
})

自动前缀： gulp-autoprefixer

gulp.task('autoprefixer',function(){
   return gulp.src('app/css/*.css') //编译的文件
        .pipe(autoprefixer()) //执行编译
        .pipe(gulp.dest('dist/css'); //输出文件
})

压缩图片： gulp-imagemin

gulp.task('imagemin',function(){
   return gulp.src('app/images/*.{jpg,png,JPG,PNG}') //优化的图片
        .pipe(imagemin()) //执行优化
        .pipe(gulp.dest('dist/images')) //输出
})

压缩html文件： gulp-minify-html

gulp.task('min-html',function(){
   return gulp.src('app/html/*.html') //压缩的文件
        .pipe(minifyHtml()) //执行压缩
        .pipe(gulp.dest('dist/html')) //输出文件
})

压缩css文件： gulp-minify-css

gulp.task('min-css',function(){
   return gulp.src('app/css/*.css') //压缩的文件
        .pipe(minifyCss()) //执行压缩
        .pipe(gulp.dest('dist/css')) //输出文件
})

压缩js文件： gulp-uglify

gulp.task('min-js',function(){
   return gulp.src('app/js/*.js') //压缩的文件
        .pipe(uglify()) //执行压缩
        .pipe(gulp.dest('dist/js')) //输出文件
})

重命名js文件： gulp-rename

gulp.task('rename-js',function(){
   return gulp.src('app/js/*.js') //重命名的文件
        .pipe(rename('app.min.js')) //执行重命名及重命名名字
        .pipe(gulp.dest('dist/js')) //输出文件
})

es6转es5： gulp-babel@7.0.1 babel-core babel-preset-es2015

//导入的时候只要导入一个即可：
const babel = require('gulp-babel')
gulp.task('babel-js',function() {
    return gulp.src('./src/js/**') //转码的文件
     .pipe(babel({presets:['es2015']// 设置转码规则
     .pipe(uglify()) //执行转码
     .pipe(gulp.dest('./dist/js')) //输出文件

创建本地服务器： gulp-connect

gulp.task('server',function(){
    return connect.server({
        root:'dist', //服务器的根目录
        port:8080,  //服务器的地址，没有此配置项默认也是 8080
        livereload:true //启用实时刷新的功能
    });
});

实时预览： gulp-connect

gulp.task('reload',function(){
    return gulp.src('app/index.html') //指定源文件
        .pipe(gulp.dest('dist')) //拷贝到dist目录
        .pipe(connect.reload()) //通知浏览器重启
});

代码检查： gulp-jshint

gulp.task('jslint', function () {
    return gulp.src('app/!*.js') //检查的文件
        .pipe(jshint()) //执行代码检查
        .pipe(jshint.reporter()) // 输出检查结果
});

清除目标文件夹： gulp-clean

gulp.task('clean',function(){
    return gulp.src('./dist')  //清除的文件夹
               .pipe(clean()) //执行清除
});

1.4.3使用gulp.watch()监听文件变化，自动执行任务

创建auto任务

gulp.task( 'auto', function(){
  gulp.watch( 'app/!*.js', ['concat-js'] );
  gulp.watch( 'app/sass/!*.sass', ['sass-css'] );
  gulp.watch( 'app/less/!*.less', ['less-css'] );
  gulp.watch( 'app/css/*.css', ['autoprefixer'] );
  gulp.watch('app/images/*.{jpg,png,JPG,PNG}', ['imagemin'] );
  gulp.watch( 'app/html/*.html', ['min-html'] );
  gulp.watch( 'app/css/*.css', ['min-css'] );
  gulp.watch( 'app/js/*.js', ['min-js'] );
  gulp.watch( './src/js/**', ['babel-js'] );
  gulp.watch( 'app/index.html', ['reload'] );
  gulp.watch( 'app/!*.js', ['jslint'] );
} );
gulp.task( 'default', ['auto'] ); //设置auto为默认任务

命令行执行 gulp

2.gulp和webpack的对比

gulp和webpack的基本区别：

gulp是强调前端开发的工作流程的自动化构建工具，可以进行js，html，css，img的压缩打包，可以将多个js文件或是css压缩成一个文件，
并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，
从而构建整体流程，它是基于流的自动化构建工具。
webpack是强调模块化开发的前端构建工具，是一个前端模块化方案，更侧重模块打包，实现了模块化开发和文件处理。他的思想就是“万物皆为模块”，
我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。
通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源，所以他还有个名字叫前端模块化打包工具。

gulp和webpack的对比：

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

构建工具
自动化
提高效率用

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

打包工具
模块化
编译模块代码方案

3.参考资料:

官网：https://gulpjs.com/
中文官网：https://www.gulpjs.com.cn/docs/