自动化构建工具-gulp学习_gulp exec-优快云博客

本文链接：https://blog.youkuaiyun.com/THcoding_Cat/article/details/118156442

本文详细介绍了如何使用gulp进行前端项目的自动化构建，包括gulp的安装、任务注册、文件读写、less转换、css压缩、js合并压缩、图片压缩、创建node服务实现热更新等步骤。还特别提到了gulp与高版本node的兼容问题，以及如何通过nvm管理node版本。此外，文章讨论了代码混淆的相关话题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.gulp安装

全局安装gulp：执行gulp任务

本地安装gulp是为了调用gulp插件的功能进入项目文件路径中执行

//全局安装
npm install gulp@3.9.1 -g

//本地安装
npm install gulp@3.9.1

//全局及本地都需要进行安装

//安装后检测
gulp -v

2.生成package.json管理gulp依赖

//npm进行初始化，生成package.json
npm init -y

再在根目录下创建gulpfile.js文件，用于配置gulp任务，并引入gulp：

//gulpfile.js

// gulp定制任务 =>执行任务
const gulp = require('gulp');

3.gulp任务处理

通过 gulp.task 注册一个任务
通过 gulp.src 读取文件
通过 gulp.dest 写入文件
通过 gulp.watch 监听文件变化
通过 gulp.run 执行任务

1.输出html和css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/styleLess.css">
</head>
<body>
    <h1 id="btn1">gulp test</h1>
    <h1 id="btn2">gulp index2</h1>
    <h1 id="btn3">使用es6 uglify不兼容</h1>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>
</html>

//gulpfile.js

// gulp.task('任务名'.callback);
// 输出html: 执行gulp execHtml
gulp.task('execHtml',() => {
    gulp.src('./src/index.html')  //读取该目录下的index.html文件
    .pipe(gulp.dest('test'))  //输出到test目录
    .pipe(gulp.dest('dist')); //并输出到dist目录
});


// 输出css
gulp.task('execCss',() => {
    gulp.src('./src/css/*.css')
    .pipe(gulp.dest('test/css'))
    .pipe(gulp.dest('dist/css'));
});


//执行上述两个任务
gulp execCss
gulp execHtml

2.处理less并压缩css文件

//先手动引入未处理的less文件
<link rel="stylesheet" href="./css/styleLess.css">

安装依赖

//less转css
npm install --save-dev  gulp-less@3.5.0

//css压缩
npm install --save-dev gulp-cssmin@0.2.0

//gulpfile.js

const less = require('gulp-less'); //less转css
const cssmin = require('gulp-cssmin');//css压缩

// 将less输出为css
gulp.task('execLess',() => {
    gulp.src('./src/css/*.less')
    // 输出之前用less()将less文件转css文件
    .pipe(less())
    // 读取和压缩css文件
    .pipe(cssmin())
    .pipe(gulp.dest('test/css'))
    .pipe(gulp.dest('dist/css'))
});

3.处理js合并压缩兼容

安装依赖：

//js合并
npm install --save-dev gulp-concat@2.6.1

//js压缩
npm install --save-dev gulp-uglify@3.0.1

//安装babel相关插件
npm install --save-dev gulp-babel@7.0.0 babel-preset-es2015 babel-core

//index1.js
btn1.onclick = function(){
    alert('测试 gulp index1.js执行');
}


//index2.js
btn2.onclick = function(){
    alert('测试 gulp index2.js执行');
}


//index3.js
//使用es6
let btn3 = document.getElementById('btn3');
btn3.onclick = () => {
    alert('测试 gulp index3.js执行');
}

//引入合并压缩的文件到index.html
//先定义好
<script src="./js/main.js"></script>

//gulpfile.js 

const concat = require('gulp-concat');//js合并
const uglify = require('gulp-uglify');//js压缩
const babel = require('gulp-babel');//es6转es5

// 输出js,合并并压缩
gulp.task('execJs',() => {
    gulp.src('./src/js/*.js')
    .pipe(concat('main.js'))//合并
    .pipe(babel({ presets: ['es2015'] }))//转es5
    .pipe(uglify())//压缩
    .pipe(gulp.dest('test/js'))
    .pipe(gulp.dest('dist/js'));
});

4.压缩图片

安装依赖：

npm install --save-dev gulp-imagemin@4.1.0

//尽量使用cnpm进行安装
cnpm install --save-dev gulp-imagemin@4.1.0

//gulpfile.js

const imagemin = require('gulp-imagemin');//图片压缩

// 压缩图片
gulp.task('execImg',() => {
    gulp.src('./src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('test/images'))
    .pipe(gulp.dest('dist/images'))
});

//压缩效果不明显

5.创建node服务使之热更新

npm install --save-dev gulp-connect@5.6.1

//gulpfile.js

const connect = require('gulp-connect');//创建一个node服务

gulp.task('execServer',() => {
    //connect.server();
    connect.server({
        root: ['dist'],//服务器管理/运行哪个目录(默认是项目的根目录)
        livereload: true,//是否热更新
        port:3000 //指定web服务的端口号（默认是8080）
    });

   /*  gulp监视文件，并且可以在文件发生改动时做一些事情.
    *  参数一：监视的文件
    *  参数二: 在文件变动后执行的一个task任务
    * */
    gulp.watch('src/css/*.less',['execLess']);
});

//gulp execServer  开启服务

此处为监听less文件的更新，需要给less任务添加reload：

// 将less输出为css
gulp.task('execLess',() => {
    gulp.src('./src/css/*.less')
    // 输出之前用less()将less文件转css文件
    .pipe(less())
    // 读取和压缩css文件
    .pipe(cssmin())
    .pipe(gulp.dest('test/css'))
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload()) //当内容发生改变时，重新加载
});

6.一次性执行任务

// 定制总任务  一次性执行所有任务
//执行命令：gulp all
//gulp.task('all',['execLess','execCss','execHtml']);


// 默认执行：gulp
gulp.task('default',[
    'execLess',
    'execCss',
    'execJs',
    'execImg',
    'execHtml',
    'execServer'
]);