使用gulp构建项目

2021-02-02 本文已影响0人 wylb868

使用gulp构建项目

1.全局安装gulp

npm install -g gulp

2.创建本地项目并初始化

进入本地项目，运行npm init初始化项目。初始化时根据需求输入对应的值，不输直接回车就行，最后输入y,生成一个package.json文件（在此文件放需要的插件和对应版本）,初始结构如下：

{
  "name": "demo-gulp",
  "version": "1.0.0",
  "description": "简单的gulp demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

3.安装常用插件

如果是开发时需要的插件使用--save-dev指令（插入devDependencies中），生成环境也需要的使用--save指令（插入dependencies中）

gulp-jshint ——js语法检测
//gulp-util ——终端控制台打印自定义错误信息 (4.0版本已弃用)
http-proxy-middleware ——设置代理，配合gulp-connect使用
gulp-less ——将less编译成css
gulp-file-include ——用于文件模块化导入，如用include的方式导入公共部分
gulp-connect ——用于启动本地服务器
gulp-clean ——清理目录
gulp-uglify --压缩js
gulp-minify-css ——压缩css
gulp-autoprefixer ——自动添加浏览器前缀
imagemin-pngquant ——png图片压缩
gulp-imagemin ——图片压缩
gulp-cache ——设置gulp打包的缓存，一般用于img

安装命令如下：

npm install gulp jshint gulp-jshint gulp-util http-proxy-middleware gulp-less gulp-file-include gulp-connect gulp-clean gulp-uglify gulp-minify-css gulp-autoprefixer imagemin-pngquant gulp-imagemin gulp-cache --save-dev

4.项目配置文件（gulpfile.js）

在控制台输入gulp的时候首先执行gulpfile.js文件，在执行default任务，所以建一个名为gulpfile.js的js文件，将任务写在里面。

由于我们要区分开发环境和生产环境，所以使用两个不同的配置文件，配置文件统一放在build文件下。结构如下：

build 配置文件存储目录
- config.prod.js 生产环境公共配置文件
- config.dev.js 开发环境公共配置文件
- gulp.dev.js 开发环境配置文件
- gulp.prod.js 生产环境配置文件
gulpfile.js

具体配置信息见：build中

5.项目整体结构如下

build 配置文件存储目录
- config.prod.js 生产环境公共配置文件
- config.dev.js 开发环境公共配置文件
- gulp.dev.js 开发环境配置文件
- gulp.prod.js 生产环境配置文件
dist 编译后文件存储目录
src 项目开发文件目录
- scss/sass/less/css
- js
- images
- fonts
- views
package.json 项目描述及安装包
gulpfile.js 运行时的配置文件

使用gulp构建项目