Vue
gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp
gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp
gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp相信大家一定听说过gulp或者webpack，grunt等前端构建工具，这些是做什么用的我也不知道，也许他们会和一些前端框架用到一起，让开发起来更方便吧。比如说vue框架脚手架里用到了webpack。。。好像跑题了 。言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了不要喷我啊。毕竟我也是一个菜鸟。
gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp
相信大家一定听说过gulp或者webpack，grunt等前端构建工具，这些是做什么用的我也不知道，也许他们会和一些前端框架用到一起，让开发起来更方便吧。比如说vue框架脚手架里用到了webpack。。。好像跑题了 。
言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了不要喷我啊。毕竟我也是一个菜鸟。写下这篇笔记的，不是为了证明什么。就是方便我以后忘了时候回顾看一下。好，废话不多说 下面开始了
虽然是菜鸟级别的教程。 但是最起码读者你应该 html css 和 js jquery吧。你要是这个都不知道，那我真的帮不到你了。 好像又说废话了， 好 下面这你的要开始了
工欲善其事必先利其器 安装好我们需要的工具
1首先要安装node.js 这个就不用教了吧，我相信大家都已经安装过了，百度node进入官网，安装的时候 一路下一步。和安装QQ一样。
2我们要有自己的命令行工具，window死 系统的用户推荐使用 gitbash 或者github 自带的命令行工具。 本菜鸟用的就是github 命令行工具(其实这都无所谓)
3自己的编辑器，
1首先新建一个项目目录，并且里面新建两个文件 一个build 一个src文件
(前面加个a能让他排到编辑器项目的最上面我点的方便，所以不要纠结啊)
src目录是我们开发的目录就是里面放你css文件，js文件，图片和html文件，build目录是gulp处理之后存放的目录，将来我们就是拿build目录里面的东西放到服务器上的
然后用自己的命令行工具 进入到项目目录里
命令行进入项目目录(是和src，build同级目录) 用的是cd命令 。(这点大家都应该知道吧)
我们都知道node.js 自带一个一个npm包管理工具，这个工具是给我们提供安装我们需要的依赖用的(不懂的不用纠结一会看图说话)。因为npm网速有点慢 我这里用的cnpm 淘宝镜像。。
打开命令行 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 回车 这里安装cnpm cnpm安装好后之后所有 我们安装依赖的时候把所有的npm 换成cnpm 速度会大大提高；
cnpm 安装好后 全局安装gulp 命令行输入 cnpm install -g gulp 回车 好，目前我们cnpm 和 全局gulp已经安装好。
用命令行进入项目目录（好像已经进入过了），输入命令 npm init -y 回车 (这是npm初始化一个目录吧，只要记住就好了) 初始化完是这个样子的
初始化完成之后你会发现你的项目目录里多了一个package.json文件这个文件是npm的配置文件(一般不用管他)
package.json文件出来后，我们在他的同级目录，(也就是项目目录) 自己新建一个gulpfile.js 的js文件(创建好先放着不用动) 确定一下目前的目录是这个样子的
这个时候切换到命令行，还是在项目目录下运行 cnpm install --save-dev gulp 运行完这个命令到项目目录刷新一下是不是多了一个node_modules目录啊(哎呀好神奇啊)
现在已经完成了准备工作 ，不过还是确认下目前的目录结构是这样的
你的是和我的一样吗之后关于gulp的代码，都是写到gulpfile.js文件里
博银财富
好了我们正式开始用写gulp部分的代码了，首先打开gulpfile.js 输入var gulp= require(‘gulp’); 这里是创建一个gulp对象，根据这个gulp对象开始操作的(不理解没关系)，必须有这一步
首先我们讲gulp的第一个api gulp.task(); 看代码
然后我们讲第二个api gulp.src() 还是看代码吧，上面的代码不用删除 然后在增加以下代码
第三个api 是gulp.watch(); gulp.watch是监控文件变化的
好想gulp的api已经说完了，对的没错 确实是说完了吧，下面我开始说一说gulp操作中常用到的一些插件
第一个 gulp中提供了一个 可以将less文件编译成css文件的一个插件 gulp-less ，需要用npm安装，
切换到我们的命令行，输入 cnpm install --save-dev gulp-less 回车 安装完毕 打开package.json 文件里面的devDependencies 对象里面是不是多了一个gulp-less 这个对象
devDependencies这个对象里面就是本项目目录里面用到的插件。到这一步是不是已经有两个了 一个gulp 一个gulp-less，言回正传切回到我们的gulpfile.js
我们在src目录下在新建一个less文件夹。在less 文件夹下 新建一个style.less文件 style.less里写上你的less代码。在gulpfile.js中增加以下代码
目前到这里是不是还是没什么难度的，讲完了less编译css下面在说一个css和js文件合并。用到的插件gulp-concat
首先先在项目目录中安装该插件 命令行中输入 cnpm install --save-dev gulp-concat (同样package.json文件里又多了一个gulp-concat插件)
我们在src/css 目录下新建两个.css文件分别写上一句css的代码(这个自己随便写了)，
然后在gulpfile.js中增加代码
讲完了css和js合并用的插件。在说一个css文件压缩的插件。gulp-clean-css
首先安装该插件，我相信不用说大家也已经回安装了。命令行中输入
cnpm install --save-dev gulp-clean-css 安装完成后在gulpfile.js文件里增加
学到这是不是已经轻车熟路了，下面说一下js压缩用到的插件(js合并用的插件和css一样也是gulp-concat)
js压缩用到的插件是gulp-uglify 安装gulp-uglify插件 命令行中输入 cnpm install --save-dev gulp-gulify
在gulpfile.js文件中新增下面的代码
命令行中输入gulp js1 运行上面的js1 命令 后是不是js文件夹里面多了一个all.js文件 并且合并了所有的js文件
说完css js 文件的合并和压缩 现在该轮到 图片压缩了吧 在我们前端项目中会用到很多图片。当项目上线后，有些图片会特别大
导致加载的时候会很慢，图片压缩会解决一点这些问题，是图片的大小变的不是那么大 嗯用到的插件是 gulp-imagemin
首先安装gulp-imagemin插件。命令行输入什么命令。大声告诉我 对 就是 cnpm install --save-dev gulp-imagemin
废话不多说直接上代码
接下来是雪碧图(精灵图)，用到的插件是gulp-css-spriter
安装命令 同上， cnpm install --save-dev gulp-css-spriter 目前该插件只支持.jpg .png文件类型的图片
在src img 中放几张小点的图片。精灵图是把一些小的图片合并成一张图片。根据background-position 进行定位从而减少了
浏览器读取图片的次数。提高了效率大概就是这样
首先放几张小的图片在src/img 的文件夹里，然后在任意一个css文件里 background url 引入这些图片
这里是css中引入这些图片 接下来看代码吧
在命令行中输入gulp spriter 执行精灵图命令。执行完毕后。会在build/下面的img文件下生成一个名为spritesheet.png的大图，并且all.css文件已经给我们自动定位好了
背景图，只要html 文件 引入build/下面的all.css文件就好了
说一下html 文件的压缩吧 html文件压缩用到的插件是 gulp-htmlmin
首先。对你没说错安装该插件 cnpm install --save-dev gulp-htmlmin
下面看代码吧
言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了不要喷我啊。毕竟我也是一个菜鸟。写下这篇笔记的，不是为了证明什么。就是方便我以后忘了时候回顾看一下。好，废话不多说 下面开始了
虽然是菜鸟级别的教程。 但是最起码读者你应该 html css 和 js jquery吧。你要是这个都不知道，那我真的帮不到你了。 好像又说废话了， 好 下面这你的要开始了
工欲善其事必先利其器 安装好我们需要的工具
1首先要安装node.js 这个就不用教了吧，我相信大家都已经安装过了，百度node进入官网，安装的时候 一路下一步。和安装QQ一样。
2我们要有自己的命令行工具，window死 系统的用户推荐使用 gitbash 或者github 自带的命令行工具。 本菜鸟用的就是github 命令行工具(其实这都无所谓)
3自己的编辑器，
1首先新建一个项目目录，并且里面新建两个文件 一个build 一个src文件
(前面加个a能让他排到编辑器项目的最上面我点的方便，所以不要纠结啊)
src目录是我们开发的目录就是里面放你css文件，js文件，图片和html文件，build目录是gulp处理之后存放的目录，将来我们就是拿build目录里面的东西放到服务器上的
然后用自己的命令行工具 进入到项目目录里
命令行进入项目目录(是和src，build同级目录) 用的是cd命令 。(这点大家都应该知道吧)
我们都知道node.js 自带一个一个npm包管理工具，这个工具是给我们提供安装我们需要的依赖用的(不懂的不用纠结一会看图说话)。因为npm网速有点慢 我这里用的cnpm 淘宝镜像。。
打开命令行 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 回车 这里安装cnpm cnpm安装好后之后所有 我们安装依赖的时候把所有的npm 换成cnpm 速度会大大提高；
cnpm 安装好后 全局安装gulp 命令行输入 cnpm install -g gulp 回车 好，目前我们cnpm 和 全局gulp已经安装好。
用命令行进入项目目录（好像已经进入过了），输入命令 npm init -y 回车 (这是npm初始化一个目录吧，只要记住就好了) 初始化完是这个样子的
初始化完成之后你会发现你的项目目录里多了一个package.json文件这个文件是npm的配置文件(一般不用管他)
package.json文件出来后，我们在他的同级目录，(也就是项目目录) 自己新建一个gulpfile.js 的js文件(创建好先放着不用动) 确定一下目前的目录是这个样子的
这个时候切换到命令行，还是在项目目录下运行 cnpm install --save-dev gulp 运行完这个命令到项目目录刷新一下是不是多了一个node_modules目录啊(哎呀好神奇啊)
现在已经完成了准备工作 ，不过还是确认下目前的目录结构是这样的
你的是和我的一样吗之后关于gulp的代码，都是写到gulpfile.js文件里
博银财富
好了我们正式开始用写gulp部分的代码了，首先打开gulpfile.js 输入var gulp= require(‘gulp’); 这里是创建一个gulp对象，根据这个gulp对象开始操作的(不理解没关系)，必须有这一步
首先我们讲gulp的第一个api gulp.task(); 看代码
-
123456789101112131415161718192021222324252627282930313233//这里是gulpfile.js文件var gulp = require ( 'gulp' ) ;//第一个API gulp.task();gulp . task ( 'default' , [ 'task1' , 'task2' ] , function ( ) { //default是默认的的命令console . log ( '我是difault默认命令' ) ;}) ;gulp . task ( 'task1' , function ( ) {console . log ( "我是task1" ) ;}) ;gulp . task ( 'task2' , [ 'task3' ] , function ( ) {console . log ( "我是task2" ) ;}) ;gulp . task ( 'task3' , function ( ) {console . log ( "我是task3" ) ;}) ;/*gulp.task()这个里面放三个参数，第一个参数是命令的名称(随便起的) 例如：上面的task1，我们在命令行里输入gulp task1 就会打印出我是task1字符串当然我们可以给他命名为default，default是默认命令 ，在命令行中只输入gulp 后面不用跟命令名称自动 执行default命令第二个参数是可选参数，类型是数组 表示当前命令依赖的哪些命令，看上面的代码defalut命令依赖 task1 和 task2 命令第三个参数是执行的操作。(可以理解为命令的操作)把上面的代码写好后，在命令行中输入 gulp 回车，会执行default命令，default命令会依赖 task1，和task2，命令所以首先会执行task1命令，打印 "我是task1"， 然后执行task2命令，因为task2命令依赖task3命令所以会先执行task3，在执行task2. 这个时候才会执行到default命令所以运行gulp 之后的打印顺序是我是task1我是task3我是task2我是default默认命令
然后我们讲第二个api gulp.src() 还是看代码吧，上面的代码不用删除 然后在增加以下代码
-
1234567gulp . task ( 'copy' , function ( ) {gulp . src ( './src/**/*' ) //这里的**/*的意思是src下面的所有文件这样放到内存中类似input读取操作. pipe ( gulp . dest ( './build/' )) //pipe方法相当于下一步 gulp.dest()相当于输出 output;}) ;/*这个时候在命令行中输入gulp copy 执行copy命令，是把src下面的所有的东西复制输出到build目录中刷新一下看看是不是build里面的和src里面的现在一模一样了* */
第三个api 是gulp.watch(); gulp.watch是监控文件变化的
-
123456789101112/** 第三个API gulp.watch();* gulp.watch 监控文件变化，第一个参数显而易见是需要监控的文件；第一个第二个参数是可选。文件变化后执行的命令。第三个参数是回调函数**/gulp . task ( 'watchfile' , function ( ) {gulp . watch ( './src/index.html' , [ 'task1' , 'task2' ] , function ( ) { })})/*在命令行中输入gulp watchfile 会发现命令行没有前面的地址了。说明。命令行正在运行。一直在监控src下面的index.html文件当我们修改index.html文件里面的内容的时候。保存一下。在命令行中会自动执行gulp的 task1 和task2命令 对不对，是不是十分神奇* */
好想gulp的api已经说完了，对的没错 确实是说完了吧，下面我开始说一说gulp操作中常用到的一些插件
第一个 gulp中提供了一个 可以将less文件编译成css文件的一个插件 gulp-less ，需要用npm安装，
切换到我们的命令行，输入 cnpm install --save-dev gulp-less 回车 安装完毕 打开package.json 文件里面的devDependencies 对象里面是不是多了一个gulp-less 这个对象
devDependencies这个对象里面就是本项目目录里面用到的插件。到这一步是不是已经有两个了 一个gulp 一个gulp-less，言回正传切回到我们的gulpfile.js
我们在src目录下在新建一个less文件夹。在less 文件夹下 新建一个style.less文件 style.less里写上你的less代码。在gulpfile.js中增加以下代码
-
12345678910var less = require ( 'gulp-less' ) ; //建立一个gulp-less的对象gulp . task ( 'less' , function ( ) {gulp . src ( 'src/less/*.less' ) //选中less文件夹下的所有的.less文件. pipe ( less ( )) //less()函数，使less文件编译成css文件 .pipe()就相当于下一步 之前好像已经说过了 习惯就好了. pipe ( gulp . dest ( 'src/css/' )) //用dest函数输出到css文件夹下})/*在命令行中输入gulp less 命令 运行过后你发现是不是你的src下面的css文件里面多了一个css文件是跟句less编译过来的。* */
目前到这里是不是还是没什么难度的，讲完了less编译css下面在说一个css和js文件合并。用到的插件gulp-concat
首先先在项目目录中安装该插件 命令行中输入 cnpm install --save-dev gulp-concat (同样package.json文件里又多了一个gulp-concat插件)
我们在src/css 目录下新建两个.css文件分别写上一句css的代码(这个自己随便写了)，
然后在gulpfile.js中增加代码
-
12345678910var concat = require('gulp-concat');gulp.task('concat',function(){gulp.src('./src/css/*.css') //选中css目录下的所有的css文件合并成all.css文件.pipe(concat('all.css',{newLine:'//这里是分割线'}))//第二个参数newLine可选表示合并中间插入的内容.pipe(gulp.dest('./src/css/'))})/*命令行中输入gulp concat 运行concat命令。之后会发现src中的css目录是不是多了一个all.css的文件里面的内容是两个css文件合并到一起的*/
讲完了css和js合并用的插件。在说一个css文件压缩的插件。gulp-clean-css
首先安装该插件，我相信不用说大家也已经回安装了。命令行中输入
cnpm install --save-dev gulp-clean-css 安装完成后在gulpfile.js文件里增加
-
12345678910111213141516/*css文件压缩 用到的插件是 gulp-clean-css* npm install --save-dev gulp-clean-css* 这里我们借用concat命令的合并css的行为，合并完后进行压缩* cleanCss()函数里面的参数可选 下面注释是兼容ie8 里面的参数可以查看npm官网中的 gulp-clean-css插件*/var cleanCss = require('gulp-clean-css');gulp.task('clean',function(){gulp.src('./src/css/*.css').pipe(concat('style.css')).pipe(cleanCss()) //.pipe(cleanCss({compatibility: 'ie8'})).pipe(gulp.dest('./src/css/'))})/*命令行中输入gulp clean命令，运行完后发现style.css里面的代码是不是被压缩了并且合并了别的所有的css文件的代码* */
学到这是不是已经轻车熟路了，下面说一下js压缩用到的插件(js合并用的插件和css一样也是gulp-concat)
js压缩用到的插件是gulp-uglify 安装gulp-uglify插件 命令行中输入 cnpm install --save-dev gulp-gulify
在gulpfile.js文件中新增下面的代码
-
123456789101112/* js 合并用的插件和css合并用的一样都是concat* js 压缩用的插件是gulp-uglify* 安装命令是* npm install --save-dev gulp-uglify*/var uglify = require ( 'gulp-uglify' ) ;gulp . task ( 'js1' , function ( ) {gulp . src ( 'src/js/*.js' ) //这一步拿到src/js文件下 所有的.js文件. pipe ( concat ( 'all.js' )) //合并到一期在all.js文件. pipe ( uglify ( )) //压缩js代码. pipe ( gulp . dest ( 'src/js/' )) //最后输出到src/js文件中}) ;
命令行中输入gulp js1 运行上面的js1 命令 后是不是js文件夹里面多了一个all.js文件 并且合并了所有的js文件
说完css js 文件的合并和压缩 现在该轮到 图片压缩了吧 在我们前端项目中会用到很多图片。当项目上线后，有些图片会特别大
导致加载的时候会很慢，图片压缩会解决一点这些问题，是图片的大小变的不是那么大 嗯用到的插件是 gulp-imagemin
首先安装gulp-imagemin插件。命令行输入什么命令。大声告诉我 对 就是 cnpm install --save-dev gulp-imagemin
废话不多说直接上代码
-
1234567891011var imagemin = require ( 'gulp-imagemin' ) ;gulp . task ( 'images' , function ( ) {gulp . src ( './src/img/*.*' ) //拿到img文件下的所有图片. pipe ( imagemin ( )) //进行图片压缩. pipe ( gulp . dest ( './build/img/' )) //压缩完后输出到build文件中的img文件里})/** 当然首先在src/img/文件夹下放上几张图片 （格式最好是jpg，或者png的）命令行中输入 gulp images 回车 命令运行完后对比一下build中的图片大小和src中 的图片大小 是不是build中的比较小* */
接下来是雪碧图(精灵图)，用到的插件是gulp-css-spriter
安装命令 同上， cnpm install --save-dev gulp-css-spriter 目前该插件只支持.jpg .png文件类型的图片
在src img 中放几张小点的图片。精灵图是把一些小的图片合并成一张图片。根据background-position 进行定位从而减少了
浏览器读取图片的次数。提高了效率大概就是这样
首先放几张小的图片在src/img 的文件夹里，然后在任意一个css文件里 background url 引入这些图片
这里是css中引入这些图片 接下来看代码吧
-
12345678910111213141516/*雪碧图(精灵图):用到的插件 gulp-css-spriter* 安装命令: npm install --save-dev gulp-css-spriter* 引入对象* 目前该插件只支持 .jpg .png文件的图片*/var spriter = require ( 'gulp-css-spriter' ) ;gulp . task ( 'spriter' , function ( ) {gulp . src ( './src/css/*.css' ). pipe ( concat ( 'all.css' )) //这里做了一下css的合并操作。上面提到过的. pipe ( spriter ({'spriteSheet' : './build/img/spritesheet.png' , //生成的路径，这里是精灵图生成的路径 和名称。根据自己的项目自定义'pathToSpriteSheetFromCSS' : '../img/spritesheet.png' //替换的路径 这里是把原来引入的背景图路径替换成这个})). pipe ( cleanCss ( )) //这里进行了压缩操作. pipe ( gulp . dest ( './build/css/' )) //最后输出到了build下面的css文件夹里}) ;
在命令行中输入gulp spriter 执行精灵图命令。执行完毕后。会在build/下面的img文件下生成一个名为spritesheet.png的大图，并且all.css文件已经给我们自动定位好了
背景图，只要html 文件 引入build/下面的all.css文件就好了
说一下html 文件的压缩吧 html文件压缩用到的插件是 gulp-htmlmin
首先。对你没说错安装该插件 cnpm install --save-dev gulp-htmlmin
下面看代码吧
前往低代码交流专区
更多推荐
5967
1
0- 0
扫一扫分享内容
- 分享
已为社区贡献1条内容
回到
顶部
顶部
所有评论(0)