前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)

Posted 2023-04-15

参考技术A

@ TOC

阅读本文章之前，相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了，那么他们之间究竟有什么区别呢？

gulp文档上面有这么一句话 ，也就是说 gulp是一个自动化构建工具；
gulp的一些功能如下(包括但不限于):

其实Webpack和另外两个并没有太多的可比性

傻瓜式起步照搬官网文档
1.安装

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

3.运行 gulp：

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档

新建一个项目gulp-test
环境:

1.新建文件以下文件如下

其中 gulpfile.js 是我们gulp的配置文件，启动gulp默认会找个这个文件并执行；
2.接下来安装依赖

一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了

安装依赖

这里页面实时刷新只讲这个 gulp-connect ，其他详情可以参照 Browsersync 和文章 gulp-livereload

安装完依赖后配置gulpfile.js如下:

大概讲解一下gulpfile.js:

gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务（task）
如上我们定义了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任务，其中:

my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；

my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；

html 是将 符合所提供的匹配模式的html进行监听，如果有变化则connect.reload()

clean 是如果任务重新启动时 删除旧文件；

default gulp默认启动的任务

watch gulp的api 监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

server 依赖gulp-connect启动一个服务器

配置完gulpfile.js之后，我们给js和css及html加点东西:

首先js/helloworld.js

css/index.scss

index.html

运行gulp

浏览器效果:

接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:

按保存之后，终端给我们报了一个错:

查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法，有问题解决问题，es6=>es5

解决方案:
安装gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

运行

依然报上面的错；找了一些原因发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6

根目录添加.babelrc文件

重新运行:

查看dist下的js文件

改变helloworld.js检查页面是否刷新

保存，页面的天空蓝换成你们喜欢的yellow颜色

修改index.scss 查看是否会刷新页面

最后修改index.html 查看是否会刷新页面

今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp类似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有不少项目还用着gulp或者grunt

扩展:

下面还有一些楼主的学习笔记:

有兴趣的可以多多交流@ 楼主博客

前端自动构建工具-gulp

前言

　　现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。

 

　　在gulp安装之前，必须先要有node的环境，因为gulp.js是基于node.js的。 
　　所以先来安装node (如果你已经有node环境了就可以跳过此布) 
　　node安装 
? 　　Node.js安装包及源码下载地址为https://nodejs.org/en/download/ node安装教程很多，此处不详述 
　　?安装完成之后 
?　　在命令行输入

　　node -v

 　　查看安装版本 

　　npm -v

 　　查看npm 版本

　　gulp安装 

　　有了npm之后就可以执行

　　

　　npm install gulp -g

　　就可以自如的使用gulp了

　　

　接下来看下gulp的应用

??　　创建一个项目

　　1.监听服务器文件

　　　　

 1 gulp.task(‘serve‘,(cb)=>{
 2     if(!args.watch) return cb();
 3     var server = liveserver.new([‘--harmony‘,‘server/bin/www‘]);
 4     server.start();
 5     gulp.watch([‘server/public/**/*.js‘,‘server/views/**/*.ejs‘],function (file) {
 6         server.notify.apply(server,[file]);
 7     })
 8     //监听需要重启的文件
 9     gulp.watch([‘server/routes/**/*.js‘,‘server/app.js‘],function () {
10         server.start.bind(server)()
11     });
12    })
13 
14 此处需要引入一些包
15 import gulp from ‘gulp‘;
16 import gulpif from ‘gulp-if‘;
17 import liveserver from ‘gulp-live-server‘;

　　2.监听css文件

gulp.task(‘css‘,()=>{
    return gulp.src(‘app/**/*.css‘)
        .pipe(gulp.dest(‘server/public‘))
        .pipe(gulpif(args.watch,livereload()))
})
此处需要引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import livereload from ‘gulp-livereload‘;

　　3.监听浏览器

import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import gutil from ‘gulp-util‘;
import args from ‘./util/args‘;

gulp.task(‘browser‘,(cb)=>{
    if(!args.watch) return cb();

    gulp.watch(‘app/**/*.js‘,[‘scripts‘]);
    gulp.watch(‘app/**/*.ejs‘,[‘pages‘]);
    gulp.watch(‘app/**/*.css‘,[‘css‘]);
});

　　4.监听js

//引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import concat from ‘gulp-concat‘;  //文件拼接
import webpack from ‘webpack‘;      //打包
import gulpWebpack from ‘webpack-stream‘;
import named from ‘vinyl-named‘;        //重命名
import livereload from ‘gulp-livereload‘;       //自动刷新  热更新
import plumber from ‘gulp-plumber‘; //处理文件信息流
import rename from ‘gulp-rename‘;       //重命名
import uglify from ‘gulp-uglify‘;       //压缩js css
import {log,colors} from ‘gulp-util‘;       //命令行输出
import args from ‘./util/args‘;         //对命令行参数进行解析


//创建一个任务
gulp.task(‘scripts‘,()=>{
    //打开
    return gulp.src([‘app/js/index.js‘])
        //处理错误
        .pipe(plumber({
            errorHandle:function () {

            }
        }))
        .pipe(named())
        .pipe(gulpWebpack({
            module:{
                loaders:[{
                    test:/\.js$/,
                    loader:‘babel-loader‘
                }]
            }
        }),null,(err,stats)=>{
        log(`Finished ‘${colors.cyan(‘scripts‘)}‘`,stats.toString({
            chunks:false
    }))
    })
        //指定路径
    .pipe(gulp.dest(‘server/public/js‘))
        //重命名
    .pipe(rename({
        basename:‘cp‘,
        extname:‘.min.js‘
    }))
        //压缩
    .pipe(uglify({compress:{properties:false},output:{‘quote_keys‘:true}}))
    .pipe(gulp.dest(‘server/public/js‘))
    .pipe(gulpif(args.watch,livereload()))

})

当然还有许多监听，此处不一一例举，但是思想则是相通的。 
对于以上的监听，有必要说明一下，在安装包时 均使用

npm install *** --save-dev 

 在安装过程中可通过package.json查看变化。