gulp——自动化管理工具

本文介绍Gulp自动化工具的基本概念及安装配置流程,演示如何利用Gulp简化前端开发中的重复任务,如less编译为css、图片压缩等。

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

       Gulp就是一种可以自动化完成我们开发过程中大量的重复工作。
eg:
自动完成一系列重复的操作
less → css
coffeescript → js
css压缩
js混淆
html压缩
img尺寸优化 等等

 **gulp链接**  

官网
中文网


gulp本身是node的模块,所以gulp的执行需要nodejs环境。网上有很多nodejs安装和环境配置。同时还要node的全局包管理器npm(bower)。读者可以先行安装,如果安装过程不会,可以留言。
gulp安装:

  1. gulp作为工具,需要在全局环境下安装,以便在power shell(或者cmd)里面执行。
    ——打开power shell ,输入npm install -g gulp(-g表示全局)

  2. gulp又提供了编程的API,所以要在项目下也安装gulp
    ——打开项目所在的power shell或者cmd。sublime可以安装terminal安装包,使用快捷键打开所在路径的控制台。
    ——一般操作步骤:npm init(生成配置文件,可以一直enter或者使用–yes全部跳过)—>npm install gulp –save或者npm install gulp –save-dev(只是在开发阶段)

  3. gulp的执行文件——gulpfile.js

 var gulp = require('gulp');//请求gulp

gulp.task('default', function() {//gulp里面的默认任务,可以自定义
    console.log('gggg')
});

生成的目录结构:

gulp

4、运行

——在power shell 输入gulp 会执行task。(强调:项目文件名一定不要和npm官方包的名字一样,否则会发生冲突)

gulp

自定义任务:

gulp

操作流程:
     首先通过 gulp.src() 方法获取到想要处理的文件流
     然后把文件流通过 pipe 方法导入到 gulp 的插件中
     最后把经过插件处理后的流再通过pipe方法导入到 gulp.dest() 方法中
     gulp.dest() 方法则把流中的内容写入到文件中

流程图:

pipe

默认的,task 将以最大的并发数执行,也就是说,gulp 会一次性运行所有的 task 并且不做任何等待。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值