自动化构建工具-gulp学习

关注

原创最新推荐文章于 2026-03-11 02:57:25 发布 595 阅读 AI 写同款· GEO 优化 ›

ADS中使用Momentum进行电源完整性分析示例这个应用可以帮助工程师用更快的时间使用ADS Momentum完成PDN分析。该应用描述了利用ADS Momentum RF模拟器进行PDN分析的方法，大大缩短了计算时间。该分析主要应用与高速数字设计。在此应用中使用了以下ADS特性： ADS设计流程集成（ADFI）。电磁协同仿真。 Momentum仿真。仿真流程如下：在Allegro中创建ADFI文件要将Alleg... 阅读详情

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