自动化构建工具-gulp学习

最新推荐文章于 2022-02-28 17:36:25 发布

谭CV

最新推荐文章于 2022-02-28 17:36:25 发布

阅读量440

点赞数 1

分类专栏：前端文章标签： gulp3.x使用 gulp3与node版本兼容 gulp自动化构建工具

本文链接：https://blog.csdn.net/thcoding_cat/article/details/118156442

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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'
]);

4.gulp版本问题注意

gulp虽然灵活小巧，但是版本及其插件问题频繁，安装困难

当前使用gulp3.x多一些，但其与node高版本不能兼容，node11以上应该不能用。

如下图：

gulp3.x与node版本不兼容时会出现该问题

我原本想不通过降级node来使之兼容，百度到一个解决方法：

降低gulp版本。处理gulp和node的不兼容问题。利用插件使gulp3和node14兼容_肖肖肖丽珠的博客-CSDN博客_node和gulp版本不兼容

解决ReferenceError: primordials is not defined问题 - 灰信网（软件开发博客聚合）

但该方法不能解决部分gulp插件的问题(安装时报上述问题)比如gulp-less的安装

最后还是要回归到切换node版本(这里为降级node) 来适配gulp3.x，最后我使用nvm(window)切换到11.10.0版本才成功使用gulp3.x。

5.nvm(window)切换node版本

nvm介绍

安装推荐版本，并切换版本即可

关于混淆

前端自动化构建工具——gulp环境搭建教程 - ShareAndCreate - 博客园

gulp插件 gulp-obfuscate js代码混淆后，不能用了，谁能告诉我混淆后有什么用？ - 知乎

谭CV

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
自动化构建工具-gulp学习

1.gulp安装//全局安装npm install [email protected] -g//本地安装npm install [email protected]//全局及本地都需要进行安装//安装后检测gulp -v2.生成package.json管理gulp依赖//npm进行初始化，生成package.jsonnpm init -y 再在根目录下创建gulpfile.js文件，用于配置gulp任务，并引入gulp：//gulpfile.js// gulp定制任务 =>..
复制链接

扫一扫