【web前端自动化工作环境配置】4.gulp工作流

淡淡的烟草味﹌ 2022-06-13 09:22 239阅读 0赞

在创建工程目录之前先全局安装一下gulp ：$sudo npm install gulp -g

1.进入创建的工程目录，命令行创建npm的配置文件

（a）npm init

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

完成以后项目根目录下会出现一个package.json文件，如下所示：

2.添加一个gulp的依赖包，类似的需要什么包都可以安装

（a）npm install gulp --save-dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 1][]

安装完成后，项目的根目录下会有一个node-modules的文件夹，package.json中会有gulp的依赖，如下所示：

{
      "name": "gamelanding",
      "version": "1.0.0",
      "description": "游戏落地宣传页",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-loader": "^6.4.1",
        "babel-preset-es2015": "^6.24.1",
        "browser-sync": "^2.26.7",
        "gulp": "^4.0.2",
        "gulp-babel": "^7.0.1",
        "gulp-connect": "^5.7.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-imagemin": "^7.1.0",
        "gulp-notify": "^3.2.0",
        "gulp-sass": "^4.0.2",
        "gulp-uglify": "^3.0.2"
      },
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0"
      }
    }

3.在项目的根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的不能修改成别的，运行的时候会自动加载，在gulpfile.js中抽象我们需要做的任务 。

4.运行gulp编译文件

![20200409172045556.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 2][]

运行项目就可以了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220613/b513515357b1414dbee7a1125fcffb42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 1]: /images/20220613/c15ed9d2d45c43d9b3b9c3cabdf07e0b.png
[20200409172045556.png]: /images/20220613/f604a73983414daca93078f6cbf5683d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 2]: /images/20220613/960d97f73f3540f8adac8c2a4117a198.png