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文件 gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp   (前面加个a能让他排到编辑器项目的最上面我点的方便,所以不要纠结啊)
src目录是我们开发的目录就是里面放你css文件,js文件,图片和html文件,build目录是gulp处理之后存放的目录,将来我们就是拿build目录里面的东西放到服务器上的

然后用自己的命令行工具 进入到项目目录里 gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp    命令行进入项目目录(是和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初始化一个目录吧,只要记住就好了) 初始化完是这个样子的 gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp

初始化完成之后你会发现你的项目目录里多了一个package.json文件这个文件是npm的配置文件(一般不用管他)

package.json文件出来后,我们在他的同级目录,(也就是项目目录) 自己新建一个gulpfile.js   的js文件(创建好先放着不用动) 确定一下目前的目录是这个样子的 gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp

这个时候切换到命令行,还是在项目目录下运行 cnpm install --save-dev gulp 运行完这个命令到项目目录刷新一下是不是多了一个node_modules目录啊(哎呀好神奇啊)

现在已经完成了准备工作 ,不过还是确认下目前的目录结构是这样的 gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp     你的是和我的一样吗之后关于gulp的代码,都是写到gulpfile.js文件里 博银财富



好了我们正式开始用写gulp部分的代码了,首先打开gulpfile.js         输入var gulp= require(‘gulp’); 这里是创建一个gulp对象,根据这个gulp对象开始操作的(不理解没关系),必须有这一步
首先我们讲gulp的第一个api     gulp.task(); 看代码

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//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()(便task1gulp task1 task1
                    defaultdefault gulp  default
  defalut task1  task2 
 
 ()
 
  gulp defaultdefault task1task2
 task1 "task1" task2task2task3task3task2. default
 gulp 
 task1
 task3
 task2
 default


然后我们讲第二个api  gulp.src() 还是看代码吧,上面的代码不用删除 然后在增加以下代码

    
    
1
2
3
4
5
6
7
gulp . task ( 'copy' , function ( ) {
     gulp . src ( './src/**/*' ) //**/*srcinput
     . pipe ( gulp . dest ( './build/' ))  //pipe  gulp.dest() output;
}) ;
/*
 gulp copy copysrc西buildbuildsrc
 * */


第三个api 是gulp.watch(); gulp.watch是监控文件变化的

    
    
1
2
3
4
5
6
7
8
9
10
11
12
/*
 * API gulp.watch();
 * gulp.watch 
 * 
 */
gulp . task ( 'watchfile' , function ( ) {
     gulp . watch ( './src/index.html' , [ 'task1' , 'task2' ] , function ( ) { })
})
/*
 gulp watchfile srcindex.html
 index.htmlgulp 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中增加以下代码

    
    
1
2
3
4
5
6
7
8
9
10
var  less  =  require ( 'gulp-less' ) ;  //gulp-less
gulp . task ( 'less' , function ( ) {
     gulp . src ( 'src/less/*.less' )  //less.less
         . pipe ( less ( )) //less()使lesscss .pipe()  
         . pipe ( gulp . dest ( 'src/css/' ))  //destcss
})
/*
 gulp less  srccsscss
 less
 * */


目前到这里是不是还是没什么难度的,讲完了less编译css下面在说一个css和js文件合并。用到的插件gulp-concat

首先先在项目目录中安装该插件 命令行中输入 cnpm install --save-dev gulp-concat  (同样package.json文件里又多了一个gulp-concat插件)

我们在src/css 目录下新建两个.css文件分别写上一句css的代码(这个自己随便写了),

然后在gulpfile.js中增加代码

    
    
1
2
3
4
5
6
7
8
9
10
var concat = require('gulp-concat');
gulp.task('concat',function(){
    gulp.src('./src/css/*.css') //csscssall.css
         .pipe(concat('all.css',{newLine:'//线'}))//newLine
         .pipe(gulp.dest('./src/css/'))
})
/*
gulp concat concatsrccssall.css
css
*/




讲完了css和js合并用的插件。在说一个css文件压缩的插件。gulp-clean-css

首先安装该插件,我相信不用说大家也已经回安装了。命令行中输入

cnpm install --save-dev gulp-clean-css    安装完成后在gulpfile.js文件里增加

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*css  gulp-clean-css
 * npm install --save-dev gulp-clean-css
 * concatcss
 * 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 cleanstyle.css
 css
 * */



学到这是不是已经轻车熟路了,下面说一下js压缩用到的插件(js合并用的插件和css一样也是gulp-concat)

js压缩用到的插件是gulp-uglify  安装gulp-uglify插件   命令行中输入 cnpm install --save-dev gulp-gulify

在gulpfile.js文件中新增下面的代码

    
    
1
2
3
4
5
6
7
8
9
10
11
12
/* js cssconcat
 * 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

废话不多说直接上代码

    
    
1
2
3
4
5
6
7
8
9
10
11
var  imagemin  =  require ( 'gulp-imagemin' ) ;
gulp . task ( 'images' , function ( ) {
     gulp . src ( './src/img/*.*' )  //img
         . pipe ( imagemin ( ))  //
         . pipe ( gulp . dest ( './build/img/' ))  //buildimg
})
/*
 * src/img/ jpgpng
  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 引入这些图片 gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp   这里是css中引入这些图片 接下来看代码吧

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*():     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/' ))  //buildcss
}) ;


在命令行中输入gulp spriter    执行精灵图命令。执行完毕后。会在build/下面的img文件下生成一个名为spritesheet.png的大图,并且all.css文件已经给我们自动定位好了

背景图,只要html 文件 引入build/下面的all.css文件就好了

说一下html 文件的压缩吧   html文件压缩用到的插件是 gulp-htmlmin  
首先。对你没说错安装该插件  cnpm install --save-dev gulp-htmlmin
下面看代码吧
Logo

前往低代码交流专区

更多推荐