前端必会的轻量打包工具gulp使用详解

目录
  • 一. 安装Node和gulp
  • 二.使用gulp压缩Js
    • 2.1 方法
    • 2.2 步骤
  • 三. 压缩CSS文件
    • 3.1 步骤
  • 四. 压缩图片
  • 五. 编译Less文件
  • 六. 编译Sass文件

一. 安装Node和gulp

gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。

在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

安装node: 由于gulp是基于node实现的,所以要先安装node

node安装

安装gulp

 npm install -g gulp

安装

 gulp -v

查看版本

二.使用gulp压缩Js

压缩js文件可以降低js文件的大小,提高页面打开速度。

2.1 方法

  • 找到要压缩的所有的js文件,压缩它们,将压缩后的文件放在 dist/js/目录下

2.2 步骤

1. 创建gulp-demo文件夹,使用npm初始化项目

 npm init

2. 在项目根目录新建一个gulpfile.js文件

  • gulp所有的配置都在这个文件里面

3. 在gulpfile文件中书写压缩js文件的代码,安装gulp 和 gulp-uglify压缩模块

 //获取gulp对象
 const gulp = require("gulp")
 // 压缩js文件的对象,使用之前需要安装
 // 安装方法:npm i gulp-uglify -D
 const uglify = require("gulp-uglify")
 // 定义压缩文件的处理方法
 function script(){
     //1. 匹配要所有压缩的js文件
     gulp.src('js/*.js')
     //2. 压缩文件
    .pipe(uglify())
     //3. 将压缩后的文件写入指定目录
    .pipe(gulp.dest('dist/js'))
 }
 //将定义好的压缩方法暴露给外界
 exports.script = gulp.series(script);
 npm i gulp gulp-uglify -D

4. 在项目根目录创建js文件夹并且创建需要测试的js文件

5. 在命令行输入如下命令运行

  • 由于我们导入的为 script,所以这里输入gulp script命令即可
 gulp script
  • 压缩后的目录如下所示

6. 升级压缩功能,每次文件修改之后,自动压缩打包

 //获取gulp对象
 const gulp = require("gulp")
 // 压缩js文件的对象,使用之前需要安装
 // 安装方法:npm i gulp-uglify -D
 const uglify = require("gulp-uglify")
 // 定义压缩文件的处理方法
 function script(){
     //1. 匹配要所有压缩的js文件
     gulp.src('js/*.js')
     //2. 压缩文件
    .pipe(uglify())
     //3. 将压缩后的文件写入指定目录
    .pipe(gulp.dest('dist/js'))
 }
 //创建监听js文件的方法
 function autoScript(){
     // 创建监听对象
     var watcher = gulp.watch("js/*.js");
     //分别监听 change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    })
 }
 //将定义好的压缩方法暴露给外界,并作为gulp的默认值
 // exports.script = gulp.series(script,autoScript);
 exports.autoScript = gulp.parallel(script,autoScript);
  • 运行
 gulp autoScript

7. 使用 exports.default 定义默认任务

 //如上所示,我们使用 export script 和 export autoScript命令执行任务
 //可以通过 exports.default 关键字指定默认任务
 exports.default = gulp.parallel(script,autoScript);
  • 设置完成之后,在命令行输入 gulp即可启动任务
 gulp
  • 完整项目目录:gulp-demo(压缩js)
  • 注意:所有的项目,下载之后先在项目根目录要运行 npm i命令安装模块

三. 压缩CSS文件

CSS文件压缩过程类似于Js文件,这里做简单介绍

3.1 步骤

1.创建gulpfile.js文件

2. 安装压缩CSS文件需要用到的模块

 npm i gulp gulp-minify-css -D

3. 在项目根目录创建CSS文件夹,在CSS文件夹下面创建要测试的CSS文件

4. 编写压缩代码,到处任务调用

 //获取gulp对象
 const gulp = require("gulp")
 //获取压缩 css文件的方法
 const minifyCss = require("gulp-minify-css")
 // 定义压缩文件的处理方法
 function css(){
    //1. 匹配要所有压缩的css文件
    gulp.src('css/*.css')
    //2. 压缩文件
    .pipe(minifyCss())
    //3. 将压缩后的文件写入指定目录
    .pipe(gulp.dest('dist/css'))
 }
 //升级:自动监听文件的改变,
 //创建监听js文件的方法
 function autoCss(){
    // 创建监听对象
    var watcher = gulp.watch("css/*.css");
    //分别监听 change,add,unlink事件
    watcher.on("change",function(path,stats){
        console.log(`${path} has been changed!`);
    });
    watcher.on("add",function(path,stats){
        console.log(`${path} has been add!`);
    });
    watcher.on("unlink",function(path,stats){
        console.log(`${path} has been unlink!`);
    })
 }
 //将定义好的压缩方法暴露给外界,并作为gulp的默认值
 // exports.default = gulp.series(css,autoCss);
 exports.autoCss = gulp.parallel(css,autoCss);

5. 运行文件

 gulp autoCss
  • 完整项目目录:gulp-demo(压缩CSS)
  • 注意:所有的项目,下载之后先在项目根目录要运行 npm i命令安装模块

四. 压缩图片

方法同上压缩js 和CSS文件,以下给出压缩图片的依赖模块,以及示例代码

依赖模块: gulp ,gulp-imagemin

代码示例:

 //获取gulp对象
 const gulp = require("gulp")
 //获取压缩 图片文件的对象
 const imagemin = require("gulp-imagemin")
 // 定义压缩文件的处理方法
 function images(){
     //1. 匹配要所有压缩的图片文件
     gulp.src('imgs/*.*')
     //2. 压缩文件
    .pipe(imagemin({
         progressive: true
    }))
     //3. 将压缩后的文件写入指定目录
    .pipe(gulp.dest('dist/imgs'))
 }
 //升级:自动监听文件的改变,
 //创建监听图片文件的方法
 function autoImages(){
     // 创建监听对象
     var watcher = gulp.watch("imgs/*.*");
     //分别监听 change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    })
 }
 //将定义好的压缩方法暴露给外界,并作为gulp的默认值
 // exports.images = gulp.series(images,autoImages);
 exports.autoImages = gulp.parallel(images,autoImages);
  • 完整项目目录:gulp-demo(压缩图片)
  • 注意:所有的项目,下载之后先在项目根目录要运行 npm i命令安装模块

五. 编译Less文件

模块: gulp,gulp-less

示例:

 //获取gulp对象
 const gulp = require("gulp")
 //获取压缩 less文件的对象
 const gulpLess = require("gulp-less")
 // 定义压缩文件的处理方法
 function less(){
     //1. 匹配要所有压缩的less文件
     gulp.src('less/*.less')
     //2. 压缩文件
    .pipe(gulpLess())
     //3. 将压缩后的文件写入指定目录
    .pipe(gulp.dest('dist/less'))
 }
 //升级:自动监听文件的改变,
 //创建监听less文件的方法
 function autoLess(){
     // 创建监听对象
     var watcher = gulp.watch("less/*.less");
     //分别监听 change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    })
 }
 //将定义好的压缩方法暴露给外界,并作为gulp的默认值
 // exports.images = gulp.series(less,autoLess);
 exports.autoLess = gulp.parallel(less,autoLess);
  • 完整项目目录:gulp-demo(编译less)
  • 注意:所有的项目,下载之后先在项目根目录要运行 npm i命令安装模块

六. 编译Sass文件

模块: gulp,gulp-sass

示例:

 //获取gulp对象
 const gulp = require("gulp")
 //获取压缩 sass文件的对象
 const gulpSass = require("gulp-sass")
 // 定义压缩文件的处理方法
 function sass(){
     //1. 匹配要所有压缩的sass文件
     gulp.src('sass/*.scss')
     //2. 压缩文件
    .pipe(gulpSass())
     //3. 将压缩后的文件写入指定目录
    .pipe(gulp.dest('dist/sass'))
 }
 //升级:自动监听文件的改变,
 //创建监听sass文件的方法
 function autoSass(){
     // 创建监听对象
     var watcher = gulp.watch("sass/*.scss");
     //分别监听 change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    });
     watcher.on("error",function(error){
         console.log(error);
    })
 }
 //将定义好的压缩方法暴露给外界,并作为gulp的默认值
 // exports.images = gulp.series(images,autoImages);
 exports.autoSass = gulp.parallel(sass,autoSass);

完整项目目录:gulp-demo(编译sass)

注意:所有的项目,下载之后先在项目根目录要运行 npm i命令安装模块

以上就是前端必会的轻量打包工具gulp使用详解的详细内容,更多关于前端轻量打包工具gulp的资料请关注我们其它相关文章!

(0)

相关推荐

  • gulp安装以及打包合并的方法教程

    前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. 安装.打包合并 1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=h

  • node.js中grunt和gulp的区别详解

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • nodejs用gulp管理前端文件方法

    1.安装node.js(https://nodejs.org/en/) 安装后使用node -v查看版本 node安装完之后会顺带安装npm ps:npm其实是Node.js的包管理工具(package manager)为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码.如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐.于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上

  • 使用bat打开多个cmd窗口执行gulp、node

    一.使用场景 使用场景:项目发布前 操作步骤: 1.执行gulp,对文件进行压缩.合并等操作: 2.在1执行完成后,对1中合并的文件如default.css进行多主题色的自动生成,在这里使用node处理. 问题:手工操作步骤繁琐 打开cmd->切换执行目录->执行gulp->关闭cmd(gulp执行后,该窗口不能再执行其他命令)->打开cmd->切换目录->执行node->关闭cmd 需求:使用.bat自动完成上述步骤 二.bat代码 @echo off star

  • 在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

    安装 node.js 首先需要安装 node.js, 通常情况下,只需要到 Node.js 官网下载安装包安装就可以了.不过我可耻的失败了,弹出了如下错误: 于是我换成了 brew 大法: brew install nodejs 安装 Gulp gulp 使用 Node.js 的 npm 命令安装: npm install --global gulp 然后在项目目录中还要安装一遍: npm install --save-dev gulp 我对这步的操作比较费解.以我多年码农经验,即然全局安装过了

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于

  • nodejs实现简单的gulp打包

    最近换了家新公司,由于是创业公司,项目基本从零开始搭建.工作几年,也没想过写点什么技术性的东西,今天突然心血来潮,哦当然,我这个人总是特别容易心血来潮,不定想干点啥,不说废话了,毕竟上班呢,开小差也不太好.忙了一个月,项目初见雏形,也基本可以1.0上线了,趁着等文案的时间,简单写点gulp打包的东西,等明儿有空再来一篇详细的,再有空再来个webpack的,哎呀,这个有空也不知道是啥时候,莫怪,好像又废话了几句.stop,stop. 从头儿来吧,首先创建一个package.json文件,就npm

  • 前端必会的轻量打包工具gulp使用详解

    目录 一. 安装Node和gulp 二.使用gulp压缩Js 2.1 方法 2.2 步骤 三. 压缩CSS文件 3.1 步骤 四. 压缩图片 五. 编译Less文件 六. 编译Sass文件 一. 安装Node和gulp gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率. 在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”. 安装

  • Java打包工具jar包详解

    Java打包工具是Java开发工具中比较常用的一种,代码重新打包工具jarjar可以帮助你将其它用到的java库打包并嵌入到你自己的项目jar包中.这样做的原因有: 当你发布项目的时候,把用到的库打包进现有项目jar包,可以让发布的这个jar包不比依赖于其它项目的jar包; 当你所用到的java库升级了以后,它所新发布的jar包可能和你现存的项目不匹配,为了保持项目的代码稳定性,你可以把编写代码时所用到的依赖jar包,全部打包进现在的项目jar包,以避免出现这个问题. jarjar可以通过Ant

  • 新手快速上手webpack4打包工具的使用详解

    一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次.方便一些刚刚入行的人学习,也是对自己的一种总结与提高 一.几个盲点的解释 1.全局安装与局部安装 对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈). 我们知道javascript是弱语言,有局部变量和全局变量,其实全局

  • apache commons工具集代码详解

    Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.下面是我这几年做开发过程中自己用过的工具类做简单介绍. 组件 功能介绍 BeanUtils 提供了对于JavaBean进行各种操作,克隆对象,属性等等. Betwixt XML与Java对象之间相互转换. Codec 处理常用的编码方法的工具类包 例如DES.SHA1.MD5.Base64等. Collections java集合框架操作. Compress java提供文件打包 压缩类库. Con

  • python数据分析工具之 matplotlib详解

    不论是数据挖掘还是数学建模,都免不了数据可视化的问题.对于 Python 来说,matplotlib 是最著名的绘图库,它主要用于二维绘图,当然也可以进行简单的三维绘图.它不但提供了一整套和 Matlab 相似但更为丰富的命令,让我们可以非常快捷地用 python 可视化数据. matplotlib基础 # 安装 pip install matplotlib 两种绘图风格: MATLAB风格: 基本函数是 plot,分别取 x,y 的值,然后取到坐标(x,y)后,对不同的连续点进行连线. 面向对

  • python2利用wxpython生成投影界面工具的图文详解

    本投影界面工具的功能: 准备好.prj投影文件,将输入文件夹内的WGS84经纬度坐标shp文件,投影为平面文件,成果自动命名为prj_***并新建在输入文件夹同一路径下. 下一步目标: 利用pyinstaller或其他打包库生成exe文件,目前停滞在python2语法.arcpy打包出错相关问题上. 参考文献: <Using Py2exe with Arcpy- It can be done easily!> <如何使用py2exe打包arcpy脚本?> GUI界面示意图 投影文件

  • Python程序打包成可执行文件exe详解流程

    今天给大家分享个可视化 Python 打包神器,欢迎点赞支持,文末提供技术交流群. 1. 什么是 auto-py-to-exe auto-py-to-exe 是一个用于将Python程序打包成可执行文件的图形化工具.本文就是主要介绍如何使用 auto-py-to-exe 完成 python 程序打包.auto-py-to-exe 基于 pyinstaller ,相比于 pyinstaller ,它多了 GUI 界面,用起来更为简单方便 2.安装 auto-py-to-exe 首先我们要确保我们的

  • Java多线程同步工具类CountDownLatch详解

    目录 简介 核心方法 CountDownLatch如何使用 CountDownLatch运行流程 运用场景 总结 简介 CountDownLatch是一个多线程同步工具类,在多线程环境中它允许多个线程处于等待状态,直到前面的线程执行结束.从类名上看CountDown既是数量递减的意思,我们可以把它理解为计数器. 核心方法 countDown():计数器递减方法. await():使调用此方法的线程进入等待状态,直到计数器计数为0时主线程才会被唤醒. await(long, TimeUnit):在

  • JS前端可扩展的低代码UI框架Sunmao使用详解

    目录 引言 设计原则 1. 明确不同角色的职责 2. 发挥代码的威力,而不是限制 3. 各个层面的可扩展性 4. 专注而不是发散 Sunmao 的工作原理 响应最新的状态 组件间交互 布局与样式 类型安全 在组件间复用代码 可扩展的可视化编辑器 保持开放 引言 尽管现在越来越多的人开始对低代码开发感兴趣,但已有低代码方案的一些局限性仍然让大家有所保留.其中最常见的担忧莫过于低代码缺乏灵活性以及容易被厂商锁定. 显然这样的担忧是合理的,因为大家都不希望在实现特定功能的时候才发现低代码平台无法支持,

  • kotlin开发cli工具小技巧详解

    目录 脚手架 开搞 开发调试 jcommander Main 函数声明 压缩模板 放飞自我 生成最终产物 结尾 脚手架 脚手架是为了保证各施工过程顺利进行而搭设的工作平台 而在程序开发过程中,每个工程或者说公司也都需要一个脚手架工具.通过脚手架命令行的形式简化开发流程,避免发生一些人为的相对低级的问题,所以这个也就是为什么叫做脚手架的原因吧. 而由于每个公司的代码规范都不同,一般情况下会主动让开发同学进行工程方面的cv操作,就是成本高并且容易出错.这也就是为什么我们打算写一些这样的工具的原因.

随机推荐