前端自动化构建工具——gulp

一时失言乱红尘 2022-05-09 11:24 352阅读 0赞

操作过程：

需要配置文件后才能执行 $ gulp命令

（1）配置一些基本信息，执行命令：$ npm init

在git指令中，对下面每一项进行配置，注意：GitHub项目的信息与配置文件一一对应，如果先关联了GitHub项目，那么下面的基本配置中的GitHub项目信息将自动对应生成；如果还未关联GitHub项目，那么配置基本信息时，可以对应配置GitHub相关信息。

Press ^C at any time to quit.
    package name: (gulp-music-player)
    version: (1.0.0)
    description:
    entry point: (index.js)
    test command:
    git repository: (https://github.com/zhuyuzhu/gulp-music-player.git)
    keywords:
    author:
    license: (ISC)
    About to write to F:\GitHub\gulp-music-player\package.json:
    
    {
      "name": "gulp-music-player",
      "version": "1.0.0",
      "description": "gulp前端自动化构建工具写音乐播放器",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/zhuyuzhu/gulp-music-player.git"
      },
      "author": "",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/zhuyuzhu/gulp-music-player/issues"
      },
      "homepage": "https://github.com/zhuyuzhu/gulp-music-player#readme"
    }

当配置完成后，文件中多一个文件：package.json文件

![70][]

（2）新建一个文件：gulpfile.js文件，用来对gulp进行设置，规定gulp如何操作文件

![70 1][]

（3）执行命令：下载开发环境下的gulp依赖

$ npm install --save-dev gulp

这下依赖的插件、文件在自动生成的node\_modules文件夹中

![70 2][]

而且项目文件夹中多了package-lock.json文件

![70 3][]

同时，package.json文件中多了：

"devDependencies": {
        "gulp": "^3.9.1"
      }

注意：node8——npm5（可以生成package-lock.json文件）；node6——npm3；

//gulp的四个方法：

// gulp.src()读取文件地址

// gulp.dest()写入文件， pipe 到多个文件夹，如果某文件夹不存在，将会自动创建它

// gulp.task()任务，做一些事情，内部带有function函数

// gulp.watch()监视文件，并且可以在文件发生改动时候做一些事情。

（4）打包压缩html文件的插件：[gulp-htmlclean][]

通过npm指令，下载开发环境下的gulp-htmlclean插件：gulp-htmlclean

$ npm install --save-dev gulp-htmlclean

那么在gulpfile.json文件中，对html代码的配置就可以操作

var gulp = require("gulp");
    var htmlclean = require("gulp-htmlclean");
    //gulp的四个方法
    // gulp.src()读取文件地址 
    // gulp.dest()写入文件， pipe 到多个文件夹，如果某文件夹不存在，将会自动创建它
    // gulp.task()任务，做一些事情，内部带有function函数
    // gulp.watch()监视文件，并且可以在文件发生改动时候做一些事情。
    
    var folder = {
        src: "src/",//开发目录文件夹
        dist: "dist/" //压缩打包后的文件夹
    }
    //创建一个操作html的任务，该任务先读取src文件夹中的html文件，再进行压缩打包，再将处理后的html文件写入到dist文件夹中
    gulp.task("html", function(){
        gulp.src(folder.src + "html/*")
            .pipe(htmlclean())
            .pipe(gulp.dest(folder.dist + "html/"))
    })
    gulp.task("default", ["html"])//执行该任务

（5）执行gulp命令：

$ gulp

![70 4][]

其结果：将src文件夹下的html文件，压缩打包到dist文件下的html文件

![70 5][]

（6）压缩打包image图片，

1）首先要下载开发环境下的图片压缩插件：gulp-imagemin

$ npm install --save-dev gulp-imagemin

2）编辑gulpfile.js关于image的代码：

3）执行 $ gulp 命令，对文件进行压缩打包：

（7）压缩打包js文件

1）需要下载插件：gulp-uglify

2) gulpfile.js代码中配置压缩js的代码

[70]: /images/20220509/7d31753df78b422eba6f420be5f9311e.png
[70 1]: /images/20220509/6bf7b209f4bb440aad79d4279075b601.png
[70 2]: /images/20220509/2ced28f135ed424a9eeb03d697da4a5c.png
[70 3]: /images/20220509/9604fd0959b54b60b95759df207aa224.png
[gulp-htmlclean]: https://www.npmjs.com/package/gulp-htmlclean/
[70 4]: /images/20220509/5f34e680babb4a2389e95036f56a0b79.png
[70 5]: /images/20220509/2b0c8dfbab9e45dd9e392951757ec6c7.png