gulp入门详解之基本操作

2024-09-01 19:48

本文主要是介绍gulp入门详解之基本操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章结构


本文分为两部分:

  1. gulp 入门
  2. gulp 常用插件

gulp入门


简单介绍

首先来简单看一个gulp的工作流程
工作流的目的是:将less转换成为一个对应的css文件。

这里写图片描述
对应项目的下载地址:点击下载

运行环境
  1. node (本文的版本是v6.9.5)
  2. 包管理:npm(或者cnpm) 不了解的同学可以参考一下:链接内容
安装gulp环境
npm install gulp -g 

全局安装gulp,安装完成之后,可以通过 gulp -v 指令查看当前版本(v3.9.1)

开发流程
  1. 创建 package.json
  2. 创建并编写 gulpfile.js
  3. 命令行执行gulp

创建 package.json
通过我们之前配置好的npm,我们执行npm install来创建一个package.json文件。文件格式如下:

{"name": "gulp", // 包名称"version": "1.0.0", // 版本号"description": "", // 文件描述"main": "gulpfile.js", // 入口文件"dependencies": { // !!! 文件的依赖,当前为空},"devDependencies": {}, // 开发版本依赖"scripts": { // "test": "echo \"Error: no test specified\" && exit 1"},"author": "", // "license": "ISC" // 
}

我们可以看到,当前项目的依赖包(dependencies)列表为空。
本例我们需要做一个less=>css的转换,因此需要使用gulp以及gulp-less这两个插件包。
在命令行中,执行npm install gulp-less,我们再去看看dependencies依赖项目中会多了一个新包。

"dependencies": {"gulp": "^3.9.1"},

创建并编写 gulpfile.js

新建一个gulpfile文件,作为自动化项目构建任务。

./src/index.less

@color: #4D926F;#header {color: @color;
}
h2 {color: @color;
}

./gulpfile.js

let gulp = require('gulp')
let less = require('gulp-less')// 自定义任务
gulp.task('testless',function(){gulp.src('src/index.less') // 匹配特定文件// gulp.src('src/*.less') //  匹配固定目录下.less文件// gulp.src('./src/**/*.less') // 匹配固定目录下,所有子文件夹下的.less文件// gulp.src('./src/**/{index,other.index}.less') // 匹配固定目录下,特定文件名的.less.pipe(less()).pipe(gulp.dest('src/css'))
})
// 执行任务
gulp.task('default',['testless'])

命令行执行gulp

在命令行中执行gulpgulp-less这两种指令。
最后可以看到,新增加了./src/css/文件夹
这里写图片描述

这篇关于gulp入门详解之基本操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1127883

相关文章

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注