gulp的基本使用操作

最新推荐文章于 2025-03-27 10:13:50 发布

wj18740503137

最新推荐文章于 2025-03-27 10:13:50 发布

阅读量596

点赞数

文章标签： gulp 前端 javascript

本文链接：https://blog.youkuaiyun.com/wj18740503137/article/details/125397016

版权

gulp

介绍

gulp 是一个基于 Nodejs 的自动化构建工具，中文主页: http://www.gulpjs.com.cn/
能自动化地完成 javascript/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务

使用步骤：

安装 nodejs
全局安装 gulp
```
npm install gulp -g
```
局部安装 gulp
```
npm init 
npm install gulp --save-dev
```

创建一个简单的应用，文件结构如下：

|- gulpfile.js  								//gulp配置文件
|- package.json

配置编码: gulpfile.js

//引入gulp模块
const gulp = require('gulp');

//定义任务
gulp.task('任务名', async function() {
  // 将你的任务的任务代码放在这
});

构建命令:
```
gulp 任务名
```
The following tasks did not complete: default

Did you forget to signal async completion?

错误的解决方法：
1. 返回一个可读流
2. 传入一个回调并执行
3. 回调函数设置为 async 函数

gulp 插件

gulp 插件是专门针对 gulp 开发的工具包（npm包），用来实现特定的功能。

gulp-babel 语法转换

Babel 是一个 JavaScript 编译器，可以将新的 JS 语法（ES6、7、8）转化为浏览器识别的 ES5 语法。

gulp-babel 是 babel 为 gulp 封装的插件

安装插件：
```
npm install --save-dev gulp-babel @babel/core @babel/preset-env
```
@babel/core 是 babel 的核心包

@babel/preset-env 预设的包 (babel-preset-es2015)
gulpfile.js 引入：
```
const babel = require('gulp-babel');
```

定义任务:

gulp.task('babel', () => {
    return gulp.src('./src/js/*.js')
        .pipe(babel({ //进行语法转换
            presets: ['@babel/env']
        })).pipe(gulp.dest('build/js'))//输出到指定目录
});

运行命令：
```
gulp babel
```

经过 babel 转换后的 ES6 模块化语法变成了 CommonJs 语法，还需要用 browserify 转换

gulp-browserify 转换 CommonJs 模块化语法

安装插件：

npm install --save-dev gulp-browserify gulp-rename

修改 gulpfile.js 引入：

const browserify = require('gulp-browserify');
const rename = require('gulp-rename');

定义任务:

gulp.task('browserify', function() {
  return gulp.src('./build/js/app.js')
    .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
    .pipe(rename('built.js'))			//为了防止冲突将文件重命名
    .pipe(gulp.dest('build/js'))		//输出到指定位置
});

运行命令
```
gulp browserify
```

gulp-uglify 压缩 JavaScript

安装插件
```
npm install --save-dev gulp-uglify
```

引入插件

const uglify = require('gulp-uglify');

定义任务

gulp.task('uglify', function () {
  return gulp.src('build/js/built.js')
    .pipe(uglify())  //压缩js
    .pipe(rename('dist.min.js'))
    .pipe(gulp.dest('dist/js'))
});

运行命令
```
gulp uglify
```

配置默认任务，让多个任务依次执行

定义默认任务

gulp.task('default', gulp.series('babel', 'browserify', 'uglify'));

gulp-less 编译 less 文件及使用 less-plugin-autoprefix 扩展前缀

扩展前缀 -webkie- -ms- -o-

安装插件

npm install gulp-less less-plugin-autoprefix --save-dev

引入插件

const less = require('gulp-less');
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });

定义任务：

gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({
      plugins: [autoprefix]//自动扩展前缀
    }))
    .pipe(gulp.dest('./build/css'));
});

运行命令：
```
gulp less 
```

使用 gulp-concat 合并 CSS 文件

安装插件
```
npm install --save-dev gulp-concat
```

引入

const concat = require('gulp-concat');

定义任务

gulp.task('concat', function () {
    return gulp.src('./build/css/*.css')
        .pipe(concat('built.css'))
        .pipe(gulp.dest('./build/css/concat'));
});

运行命令：gulp concat

gulp-cssmin 压缩 CSS 文件

安装插件：
```
npm install --save-dev gulp-cssmin
```

引入

const cssmin = require('gulp-cssmin');

定义任务

gulp.task('cssmin', function () {
    return gulp.src('build/css/concat/built.css')
        .pipe(cssmin())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('dist/css'));
});

gulp-htmlmin 压缩 HTML 文件

安装插件
```
npm install --save gulp-htmlmin
```

引入

const htmlmin = require('gulp-htmlmin');

定义任务

gulp.task('htmlmin', () => {
  return gulp.src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true ,//去除空格
      removeComments:true //去除注释
    }))
    .pipe(gulp.dest('dist'));
});

自动化配置

安装模块

npm install gulp-livereload gulp-connect opn --save-dev

引入模块

const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');

自动执行任务，编译代码

//1. 在所有可能要执行任务后面加上 .pipe(livereload());
gulp.task('watch', function () {
    //2. 启动热加载服务
    livereload.listen();
    //3. 通过自己服务器打开项目，自动刷新
    connect.server({
        root: 'dist',
        port: 3000,
        livereload: true
    });
    //4. 自动打开浏览器
    opn('http://localhost:3000/index.html');
    //5. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
    gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
    gulp.watch('./src/index.html', gulp.series('htmlmin'));
});