使用gulp构建项目

其他 2020-02-13 20:01:10 阅读次数: 0

gulp是前端开发过程中自动构建项目的工具，能够自动监测文件变化以及完成js/sass/less/html/image/css等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能，gulp让简单的任务简单，复杂的任务可管理。

gulp是基于 node 强大的流(stream)能力，在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。

具体流程

安装NodeJS，自行在node官网，选择合适电脑的版本进行下载，并安装，通过node -v检查是否安装成功

image.png

安装 gulp 命令行工具

npm install --global gulp-cli

创建文件夹，用编辑器打开文件夹，我这用的是VSCode，点击Terminal中new terminal，在TERMINAL中输入npm init一直回车，文件夹中就会多一个package.json文件

image.png

安装 gulp，作为开发时依赖项

npm install --save-dev gulp

检查 gulp 版本，判断是否安装成功

image.png

在文件夹下创建 gulpfile.js 文件，并且创建src文件夹，在src文件夹内创建js，css，less，image文件夹和一个index.html文件，js文件夹内创建index1.js和index2.js，css文件夹内创建style1.css，less文件夹内创建lessStyle.less文件，下图是整个项目的结构

image.png

index1.js

(function(){
    let arr = [1,2,3,4,5]
    arr.forEach(element => {
        console.log(element)
    });
})();

index2.js

(function(){
    let arr = [7,8,9,10]
    arr.forEach(element => {
        console.log(element)
    });
})();

style1.css

.box1{
    width: 100px;
    height: 100px;
    background-color: pink;
}

lessStyle.less

@boxwidth:100px;

.box2{
    width: @boxwidth;
    height: @boxwidth;
    background-color: yellow;
}
.box3{
    width: @boxwidth;
    height: @boxwidth;
    background-color: green;
}

index.html(不是最终的html，因为我们最后引入的应该是打包好的文件的路径)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style1.css">
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script src="./js/index1.js"></script>
</body>
</html>

要运行less，首先需要安装less

npm install gulp-less --save

编写最重要的gulpfile.js，我们先来个最简单的试试爪

const { src, dest } = require('gulp');
const less = require('gulp-less');
function css() {
    // src你要操作的文件夹的位置，* 是通配符表示src/css文件夹下的所有以.css结尾的文件
    return src('src/less/*.less')
        .pipe(less())
        .pipe(dest('css/css'))
    //dest是指你输出文件的位置，如果你的项目内没有css文件夹，将会帮你自动生成这个文件夹
}

exports.css = css;

浏览器是不能直接less文件，所以通过gulp-less主要是为了将less转化为css，你可能会问，直接写css文件不就好了，就不需要这个插件来进行转化了，那不是这个样子的哦，less还是很方便的，可以定义变量，轻松实现多重继承啥的，具体的优秀之处，就不在这边细说了，可以自行百度。
gulp less回车运行，你就会发现项目中的css文件夹里多了个lessStyle.css文件

现在我们把src下面的css文件夹里面的文件压缩合并，该优化的优化

npm install gulp-csso --save

npm install gulp-concat --save

npm install gulp-autoprefixer --save

运行代码，把对应的插件加上，然后开始写代码吧

const { src, dest, series, parallel } = require('gulp');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');    //把css代码优化
const concat = require('gulp-concat');    //合并代码
const autoprefixer = require('gulp-autoprefixer'); //自动补全浏览器的前缀

function css() {
    // src你要操作的文件夹的位置，* 是通配符表示src/css文件夹下的所有以.css结尾的文件
    return src('src/less/*.less')
        .pipe(less())
        .pipe(dest('src/css'))
    //dest是指你输出文件的位置，如果你的项目内没有dist文件夹，将会帮你自动生成这个文件夹
}

function cssMinify() {
    return src('src/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(autoprefixer({
            cascade: true, //是否美化属性值 默认：true 像这样
            remove: true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(minifyCSS())
        .pipe(dest("dist/css"))
}

exports.css = css;
exports.cssMin = series(css, cssMinify); //series是让这两个任务串行执行

gulp cssMin回车，你会发现dist的css文件夹下出现了all.min.css文件

image.png

修改index.html中引入css的部分

<link rel="stylesheet" href="../dist/css/all.min.css">

查看效果

image.png

对js进行加工，先把js代码合并，然后再把合并好的js中es6语法转换成浏览器能识别es5语法，最后在压缩

npm install --save-dev gulp-babel @babel/core @babel/preset-env

npm install --save-dev gulp-uglify

const { src, dest, } = require('gulp');
const concat = require('gulp-concat');  //合并代码
const babel = require('gulp-babel');  //将es6转换成es5
const uglify = require('gulp-uglify'); //压缩js文件

function js(){
    return src('src/js/*.js')
    .pipe(concat('all.min.js'))
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(dest('dist/js'))
}

exports.js = js

gulp js回车，dist文件夹多出来一个包含all.min.js的js文件夹

修改index.html中引入js的代码

<script src="../dist/js/all.min.js"></script>

压缩html文件

npm install gulp-html-minify --save

const { src, dest } = require('gulp');
const htmlMinify = require("gulp-html-minify"); //压缩html文件
function html(){
    return src('src/*.html')
    .pipe(htmlMinify())
    .pipe(dest('dist'))
}
exports.html = html

gulp html回车，压缩好的html文件已经在dist 文件夹下了

图片压缩

npm install --save-dev gulp-smushit

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

function image(){
    return src('src/image/*')
    .pipe(smushit())
    .pipe(dest('dist/image'))
}

exports.image = image

gulp image回车，压缩完成

实现半自动

如果我们要对项目中的所有文件都进行相应的操作，每次都单独的gulp 某任务是在也太麻烦了，有没有什么办法，运行一行代码，所有的任务都执行呢？gulp给我们提供了一个解决的办法，在gulpfile.js中添加这个代码就好了

exports.default = parallel(this.cssMin,js,html,image) //parallel()代表并行执行这些个任务

gulp回车，你会发现之前的所有任务都执行了

image.png

从图中我们也不难发现所有的任务都是异步执行的，当然某些任务如果需要同步的话，也可以用series()

我们每次更新完js或者css代码之后都要重新输入打包命令，然后刷新index.html页面才能看到最新的效果，着实麻烦，所以为了方便我们开发（其实是为了偷懒），当改变这些个文件的时候，我们要让他自动构建

npm install --save-dev gulp-livereload

const { src, dest, series, parallel, watch } = require('gulp');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso'); //把css代码优化
const concat = require('gulp-concat');  //合并代码
const autoprefixer = require('gulp-autoprefixer');  //自动补全浏览器的前缀
const babel = require('gulp-babel');  //将es6转换成es5
const uglify = require('gulp-uglify'); //压缩js文件
const htmlMinify = require("gulp-html-minify"); //压缩html文件
const smushit = require('gulp-smushit'); //压缩图片
const livereload = require('gulp-livereload'); //修改代码自动编译

function css() {
    // src你要操作的文件夹的位置，* 是通配符表示src/css文件夹下的所有以.css结尾的文件
    return src('src/less/*.less')
        .pipe(less())
        .pipe(dest('src/css'))
    //dest是指你输出文件的位置，如果你的项目内没有dist文件夹，将会帮你自动生成这个文件夹
}

function cssMinify() {
    return src('src/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(autoprefixer({
            cascade: true, //是否美化属性值 默认：true 像这样
            remove: true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(minifyCSS())
        .pipe(dest("dist/css"))
}

function js(){
    return src('src/js/*.js')
    .pipe(concat('all.min.js'))
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(dest('dist/js'))
}

function html(){
    return src('src/*.html')
    .pipe(htmlMinify())
    .pipe(dest('dist'))
}

function image(){
    return src('src/image/*')
    .pipe(smushit())
    .pipe(dest('dist/image'))
}

function watches(){
    livereload.listen();
    watch(['src/less/*.less'], series(css,cssMinify))
    watch(['src/css/*.css'], series(cssMinify))
    watch(['src/js/*.js'], parallel(js))
    watch(['src/index.html'], parallel(html))
    watch(['src/image/*'], parallel(image))
}

exports.cssMin = series(css, cssMinify); //series是让这两个任务串行执行
exports.default = parallel(this.cssMin,js,html,image)
exports.watch = series(this.default,watches)

gulp watch回车，当你看到最后一行显示的是Starting 'watches'...时，就说明他已经在开始监视了，修改css，less，js都会重新编译，刷新浏览器的index.html，就是最新的效果了

热加载（修改不用自动编译，不用刷新页面，就会显示最新效果）

嗯，对，你们想的没错，还是为了更加方便的开发(就是懒)，如果不用自己刷新页面就更棒了

npm install --save-dev gulp-connect

const { src, dest, series, parallel, watch } = require('gulp');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso'); //把css代码优化
const concat = require('gulp-concat');  //合并代码
const autoprefixer = require('gulp-autoprefixer');  //自动补全浏览器的前缀
const babel = require('gulp-babel');  //将es6转换成es5
const uglify = require('gulp-uglify'); //压缩js文件
const htmlMinify = require("gulp-html-minify"); //压缩html文件
const smushit = require('gulp-smushit'); //压缩图片
const livereload = require('gulp-livereload'); //修改代码自动编译
const connect = require('gulp-connect'); // 热加载

function css() {
    // src你要操作的文件夹的位置，* 是通配符表示src/css文件夹下的所有以.css结尾的文件
    return src('src/less/*.less')
        .pipe(less())
        .pipe(dest('src/css'))
    //dest是指你输出文件的位置，如果你的项目内没有dist文件夹，将会帮你自动生成这个文件夹
        .pipe(connect.reload());//热加载插件需要
}

function cssMinify() {
    return src('src/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(autoprefixer({
            cascade: true, //是否美化属性值 默认：true 像这样
            remove: true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(minifyCSS())
        .pipe(dest("dist/css"))
        .pipe(connect.reload());
}

function js(){
    return src('src/js/*.js')
    .pipe(concat('all.min.js'))
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(dest('dist/js'))
    .pipe(connect.reload());
}

function html(){
    return src('src/*.html')
    .pipe(htmlMinify())
    .pipe(dest('dist'))
    .pipe(connect.reload());
}

function image(){
    return src('src/image/*')
    .pipe(smushit())
    .pipe(dest('dist/image'))
    .pipe(connect.reload());
}


function server(){
    connect.server({
        root: 'dist/',  //再dist文件夹下查找资源
        port: 8888, //浏览器内打开的端口号
        livereload: true //是否实时刷新
    })
    watch(['src/less/*.less'], series(css,cssMinify))
    watch(['src/css/*.css'], series(cssMinify))
    watch(['src/js/*.js'], parallel(js))
    watch(['src/index.html'], parallel(html))
    watch(['src/image/*'], parallel(image))
}

exports.cssMin = series(css, cssMinify); //series是让这两个任务串行执行
exports.default = parallel(this.cssMin,js,html)
exports.server = series(this.default,server)

修改index.html引入css和js的代码

<link rel="stylesheet" href="css/all.min.css">
<script src="js/all.min.js"></script>

gulp server回车，出现这个就是成功了，修改文件内容，不用刷新页面，就能看到最新效果，不过每次修改完gulpfile.js文件都要重新编译
1LILvj.png

好了，都叨叨叨完了，上面定义的文件除了index.html引入资源的路径和gulpfile.js一直在修改以外，其他都没变，所以最终的这两个文件的代码我就放下面了

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/all.min.css">
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script src="js/all.min.js"></script>
</body>
</html>

gulpfile.js

const { src, dest, series, parallel, watch } = require('gulp');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso'); //把css代码优化
const concat = require('gulp-concat');  //合并代码
const autoprefixer = require('gulp-autoprefixer');  //自动补全浏览器的前缀
const babel = require('gulp-babel');  //将es6转换成es5
const uglify = require('gulp-uglify'); //压缩js文件
const htmlMinify = require("gulp-html-minify"); //压缩html文件
const smushit = require('gulp-smushit'); //压缩图片
const livereload = require('gulp-livereload'); //修改代码自动编译
const connect = require('gulp-connect'); // 全自动

function css() {
    // src你要操作的文件夹的位置，* 是通配符表示src/css文件夹下的所有以.css结尾的文件
    return src('src/less/*.less')
        .pipe(less())
        .pipe(dest('src/css'))
    //dest是指你输出文件的位置，如果你的项目内没有dist文件夹，将会帮你自动生成这个文件夹
        .pipe(connect.reload());
}

function cssMinify() {
    return src('src/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(autoprefixer({
            cascade: true, //是否美化属性值 默认：true 像这样
            remove: true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(minifyCSS())
        .pipe(dest("dist/css"))
        .pipe(connect.reload());
}

function js(){
    return src('src/js/*.js')
    .pipe(concat('all.min.js'))
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(dest('dist/js'))
    .pipe(connect.reload());
}

function html(){
    return src('src/*.html')
    .pipe(htmlMinify())
    .pipe(dest('dist'))
    .pipe(connect.reload());
}

function image(){
    return src('src/image/*')
    .pipe(smushit())
    .pipe(dest('dist/image'))
    .pipe(connect.reload());
}

function watches(){
    livereload.listen();
    watch(['src/less/*.less'], series(css,cssMinify))
    watch(['src/css/*.css'], series(cssMinify))
    watch(['src/js/*.js'], parallel(js))
    watch(['src/index.html'], parallel(html))
    watch(['src/image/*'], parallel(image))
}

function server(){
    connect.server({
        root: 'dist/',  //再dist文件夹下查找资源
        port: 8888, //浏览器内打开的端口号
        livereload: true //是否实时刷新
    })
    watch(['src/less/*.less'], series(css,cssMinify))
    watch(['src/css/*.css'], series(cssMinify))
    watch(['src/js/*.js'], parallel(js))
    watch(['src/index.html'], parallel(html))
    watch(['src/image/*'], parallel(image))
}

exports.css = css;
exports.cssMin = series(css, cssMinify); //series是让这两个任务串行执行
exports.js = js
exports.html = html
exports.image = image
exports.default = parallel(this.cssMin,js,html)
exports.watch = series(this.default,watches)
exports.server = series(this.default,server)

好了，完成，有什么错误的地方，欢迎留言指正

猜你喜欢

转载自www.cnblogs.com/jzhey/p/12299875.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022