gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp

gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp相信大家一定听说过gulp或者webpack，grunt等前端构建工具，这些是做什么用的我也不知道，也许他们会和一些前端框架用到一起，让开发起来更方便吧。比如说vue框架脚手架里用到了webpack。。。好像跑题了。言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了不要喷我啊。毕竟我也是一个菜鸟。

momoda111

6036人浏览 · 2017-08-02 18:02:57

momoda111 · 2017-08-02 18:02:57 发布

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()这个里面放三个参数，第一个参数是命令的名称(随便起的) 例如：上面的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() 还是看代码吧，上面的代码不用删除然后在增加以下代码


    
     
      
       1
      
      
       2
      
      
       3
      
      
       4
      
      
       5
      
      
       6
      
      
       7
      
     
     
    
    
     
      
       
      
      
       
      
      
       
        gulp
        .
        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是监控文件变化的


    
     
      
       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 会发现命令行没有前面的地址了。说明。命令行正在运行。一直在监控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中增加以下代码


    
     
      
       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()函数，使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中增加代码


    
     
      
       1
      
      
       2
      
      
       3
      
      
       4
      
      
       5
      
      
       6
      
      
       7
      
      
       8
      
      
       9
      
      
       10
      
     
     
    
    
     
      
       
      
      
       
      
      
       
        var 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文件里增加


    
     
      
       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
       
       
         * 这里我们借用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文件中新增下面的代码


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

废话不多说直接上代码


    
     
      
       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/'
        )) 
        //压缩完后输出到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 引入这些图片 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/'
        )) 
        //最后输出到了build下面的css文件夹里
       
       
        })
        ;

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

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

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

Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐