Gulp(打包工具)使用教程
gulp
gulp运行在nodejs环境下,而不是运行在浏览器中。因此使用gulp之前,需要使用npm安装gulp。
安装node
gulp是运行在nodejs环境下,因此需要安装nodejs
node -v #查看node版本
npm -v #查看npm版本
npm基本使用
npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
npm也是全球最大的开源库生态系统,上面管理了javascript相关的将近50W个包。使用非常的方便。
修改镜像地址
npm默认访问的https://www.npmjs.com/,这是国外的网站,访问和下载速度会很慢。
淘宝镜像 这是一个完整 npmjs.org
镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。在国内,下载速度会得到质的提升
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
基本使用步骤
- 输入
npm init
进行初始化- 会生成一个
package.json
文件。 package.json
是node项目的配置文件,用于管理包之间的依赖。
- 会生成一个
npm install jquery --save
就可以下载jquery的包了--save
会把内容添加到package.json
中,默认下载最新版本的jquerynpm install jquery@1.12.4 --save
下载指定版本的jquery文件。nmp info jquery
查看jquery这个包的信息
npm remove 包名称 --save
移除包的依赖,并修改package.json
关于package.json
,npm可以根据该文件,配合npm install
命令自动下载依赖的包,不用每次都拷贝依赖的内容,只需要一个package.json
即可。
通过npm配合require在node中非常的常用,现在大伙知道安装包的大致步骤即可。
Gulp 前端自动化构建工具
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
Gulp能做什么?
- less/sass文件转换css文件
- html文件、css文件、js文件以及图片的压缩
- 自动补充属性的前缀。
- 多浏览器的同步
这些操作都需要手动去完成,繁琐但是不难,如果是用了gulp,这些工作只需要一句话就能完成,实行自动化构建,从而提高了工作的效率。
官网
中文网
其他构建工具:Grunt、webpack
gulp的应用场景
- 项目发布前,对项目进行构建
- 自动完成一系列重复的操作
js/css/html文件的压缩,混淆,监视文件变化,同步浏览器等。
less转换成css文件。
gulp的使用步骤
安装nodejs --> 全局安装gulp --> 项目安装gulp以及gulp插件 --> 配置gulpfile.js --> 运行任务
安装gulp
- 全局安装gulp
npm install --global gulp
执行gulp命令时能够使用gulp命令- –global :全局安装在
C:\Users\Administrator\AppData\Roaming\npm
目录,并且会写入系统变量,可以在任何目录下使用gulp
命令
- 作为项目的开发依赖(devDependencies)安装
npm install --save-dev gulp
本地安装gulp为了使用gulp功能--save
与--save-dev
的区别,后者只有开发时会使用到,在生产环境中,并不会依赖。
核心方法
task() //gulp是以任务为单位实现功能
src() //传入路径参数,获取要处理的指定文件
dest() //指定处理后的文件输出路径
watch()//监视文件的变化,做出响应的处理。
使用步骤 :
- 在文件夹的根目录中,创建一个
gulpfile.js
文件- 文件名固定,因为将来执行gulp命令时,会搜索
gulpfile.js
文件
- 文件名固定,因为将来执行gulp命令时,会搜索
- 在gulpfile.js文件中写gulp任务
gulp 任务名称
执行gulp任务
安装gulp插件
gulp-less
将less文件转换成css文件gulp-uglify
压缩和混淆js代码gulp-cssnano
压缩css代码gulp-htmlmin
压缩html代码gulp-rename
文件重命名
安装命令:npm install gulp-名称 --save-dev
进行安装
npm install gulp-less --save-dev
npm install gulp-uglify --save-dev
npm install gulp-cssnano --save-dev
npm install gulp-htmlmin --save-dev
npm install gulp-rename --save-devnpm install --save-dev gulp-less gulp-uglify gulp-cssnano gulp-htmlmin gulp-rename
gulp常用插件
gulp之js压缩
//1. 引入gulp的包
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename")//2. 创建gulp任务
gulp.task('js', function () {//src获取到要压缩的文件,传入数组可以压缩多个文件,路径可以使用通配符gulp.src("./jquery.js").pipe( uglify())//使用uglify插件.pipe(rename({ suffix: '.min' })) //使用rename插件,压缩后的文件会带上.min后缀.pipe( gulp.dest("./dist") );//dest:指定输出路径
});
最后:在gulpfile.js所在的目录执行gulp js
命令即可。
gulp之less转css
var less = require('gulp-less');;
//less转css任务
gulp.task("less", function () {gulp.src("./less/index.less").pipe(less()).pipe(gulp.dest("./css"));
});
gulp之html压缩
gulp.task("html", function () {gulp.src("./index.html").pipe(htmlmin({collapseWhitespace: true,minifyCSS:true,minifyJS:true})).pipe(gulp.dest("./dist"));
});
同时执行多个任务
// 同时执行多个任务,default是默认的名字,可以直接使用gulp命令执行。
gulp.task("default", ["js","less","html"],function () {console.log("任务执行完毕");
});
思考:将gulp应用到博学谷中
gulp之Broswer-sync
Browsersync + Gulp.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();// 静态服务器
gulp.task('browser-sync', function() {browserSync.init({server: {baseDir: "./"}});
});// 代理gulp.task('browser-sync', function() {browserSync.init({proxy: "你的域名或IP"});
});
Gulp(打包工具)使用教程相关推荐
- 安卓8.X解包打包工具和教程,windows平台一键打包解包工具
ROM制作工具在上周独家适配了安卓8.X的解包打包功能,很多朋友对这个功能翘首以盼,历经一个月的适配完善,得到了广泛认可. 软件是免费使用的哦! ROM制作工具目前已经是windows下最强大的一键解 ...
- html5一键打包成苹果软件,GDB苹果网页一键打包工具如何使用?GDB苹果网页一键打包工具安装使用教程...
4.图标/启动图设置(可选) 1)软件图标 可以选择png或者jpg或者bmp图片作为APP的图标,建议使用512*512尺寸的png图片,如果使用其他尺寸的图片,则会被缩放拉伸 2)启动图片: 可以 ...
- 浅谈前端项目打包工具webpack和gulp
webpack:一个模块打包工具(更适合单页面spa模块开发) Webpack更侧重于模块打包,把开发中的所有资源(图片.js文件.css文件等)看成模块.Webpack是通过loader(加载器)和 ...
- 打包工具的配置教程见的多了,但它们的运行原理你知道吗?
前端模块化成为了主流的今天,离不开各种打包工具的贡献.社区里面对于webpack,rollup以及后起之秀parcel的介绍层出不穷,对于它们各自的使用配置分析也是汗牛充栋.为了避免成为一位" ...
- 按键精灵脚本打包工具(自带热更新功能)方便有需要的人有教程有链接
按键精灵小精灵打包工具下载链接: 按键精灵打包工具下载链接 有需要的自行下载吧,比世面上收费的功能强大,具有热更新功能. 直接就可以把自己的程序打包成apk使用.
- vite(一)前端打包工具发展史
现如今前端打包工具最火的无疑是vite!但是vite也不是凭空产生的,而是踩着前人肩膀发展起来的.所以在学习vite之前,有必要了解前端打包工具发展史. 前端打包工具发展史分为哪些阶段? 每一次前端打 ...
- 用InstallShield 打包工具 打 Win32 程序 (depends.exe 用看程序都依赖了哪些dll)
InstallShield 打包工具 1.InstallShield Limited Edition 安装教程 转载:http://www.cnblogs.com/javawebsoa/archive ...
- 【Tools】RDB打包工具详解
01. 概述 Rdb打包解包工具是一款功能强大的打包解包工具.它可以将一个指定的包文件(类似压缩包那样包含了很多文件或文件夹在里面的文件)中的内容释放到新文件夹中,也可以逆向将一个文件夹中的内容重新打 ...
- rollup函数_Vue3同款打包工具Rollup常用配置
Rollup的优势 在最新的Vue3版本中,也使用了rollup作为打包工具.相比于webpack,rollup要轻量许多,用于弥补gulp的无tree-shaking是很好的选择,最大的用途是打包生 ...
最新文章
- 背包问题(多重背包+0-1背包)
- 应用层级时空记忆模型(HTM)实现对时序数据的异常检测
- flutter apk 打包
- linux桌面环境知乎,24 个值得尝试的 Linux 桌面环境 | Linux 中国
- OpenCASCADE:绘制测试线束之命令语言
- JVM笔记(JVM内存+垃圾回收器)详解
- 数据中心细节_当细节很重要时数据不平衡
- 解决mac 系统软件被阻止载入点允许没反应的问题
- 怎么配置java ee_如何配置Java EE Eclipse+Tomcat开发环境
- java模拟记事本的一些功能
- 2016年6月 之 《设计模式》
- gstreamer/deepstream崩溃记录及分析
- 微信公众号h5开发流程
- centos7开启网卡命令_Centos7启动网卡并查看IP地址的方法
- 有测试狗狗好坏的软件吗,6个测试判断狗狗性格,胆小或凶猛一测便知,你家狗狗是哪种?...
- python搬家具_python面向对象编程: 搬家具案例
- 植物大战 C++ ——基础特性
- 大数据就业前景真的那么好吗
- 为什呢vue组件中的data必须是函数?
- JAVA基础总结----JAVA面试必备
热门文章
- ESP8266-Uart
- java 1.6 jre 下载_java JRE下载、安装以及环境变量的配置图文教程
- 查询引擎怎么选?7000字解析所有开源引擎的秘密
- 微型计算机控制技术中南大学,中南大学2013微型计算机控制技术试题及答案.doc...
- 机器视觉学习笔记(七)——灰度分析与变换(基于LabVIEW)
- 大批量查询申通物流并分析出揽收后没有物流的单号
- 基于深度学习的OCR技术
- 详解URI、URN、URL
- 池州学院国家二级计算机,池州学院2017年全国计算机二级考试报名步骤
- Python基础入门实战分享