gulp 入门打包教程

时间:2021-2-20 作者:admin

gulp 入门打包教程

实现的功能说明

  • 编译js文件es6、es7、es8
  • js文件代码压缩
  • 编译less文件
  • gulp多任务合并执行

项目编译

项目目录结构如下:

  1. 全局安装gulp(已安装可以跳过)
npm install -g gulp

# 测试是否安装成功
gulp --version
# CLI version: 2.3.0
# Local version: 4.0.2
  1. 初始化package.json
# 新建gulp_build 并初始化package.json文件
mkdir gulp_build && npm init -y  
  1. 安装编译依赖
npm install @babel/cli @babel/core @babel/preset-env gulp gulp-babel gulp-less gulp-uglify -save-dev
  1. package.json目录结构,如下:
{
  "name": "syncFilder",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp"                                       // 新增的
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-less": "^4.0.1",
    "gulp-uglify": "^3.0.2"
  }
}

  1. 创建gulpfile.js

在项目根目录新建gulpfile.js文件

var gulp = require("gulp");
var babel = require("gulp-babel");
var uglify = require('gulp-uglify')
var less = require('gulp-less')

function css_build() {
 return gulp.src('test.less')    // 入口文件
   .pipe(less())
   .pipe(gulp.dest('dist/css')); //打包之后的文件
}

function js_build() {
 return gulp.src("test.js")
   .pipe(babel())    //语法编译
   .pipe(uglify())   //代码压缩
   .pipe(gulp.dest("dist"));
}

// 多任务合并执行
gulp.task("default", gulp.series(css_build, js_build));
  1. 创建.babelrc文件,内容如下:
{
   "presets": ["@babel/preset-env"]
}
  1. 编译文件

执行gulp默认会执行gulpfile.js文件

# 根目录执行此命令
gulp 
# 或者
npm run build
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。