gulp 构建工具基本配置

最新推荐文章于 2024-09-14 18:52:56 发布

jin_zuo

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量242

点赞数

分类专栏： gulp构建工具文章标签： javascript

本文链接：https://blog.csdn.net/jin_zuo/article/details/108118040

版权

gulp构建工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Gulp 构建工具

1.检查node、npm是否正确安装

node --version             npm --version

在这里插入图片描述

2.安装gulp命令行工具

npm install --global gulp-cli

在这里插入图片描述

3.进入到创建项目

在这里插入图片描述

4.在项目目录下创建 package.json 文件

npm init

上述命令将指引你设置项目名、版本、描述信息等。

{
  "name": "hacod",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-rename": "^2.0.0",
    "gulp-uglify": "^3.0.2"
  }
}

5.安装gulp,作为开发时依赖项

npm install --save-dev gulp

在这里插入图片描述

6.检查gulp版本

gulp --version

在这里插入图片描述

7.创建gulp文件

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

var gulp = require('gulp');
var uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean');//- 用于删除文件

gulp.task('clean:js', function () {
  return gulp.src('js/**/*.min.js',{read:false})
    .pipe(clean());   //清除文件
});

gulp.task('uglify:js', function () {
  return  gulp.src('js/**/*.js')       // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
    .pipe(uglify())            //压缩
    .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
    .pipe(gulp.dest('js'));    //打包压缩在js目录下。
    done();
});

gulp.task('default', gulp.series('clean:js','uglify:js'));