gulp打包

Posted xiaoyue-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp打包相关的知识,希望对你有一定的参考价值。

gulp3.9.1

官网:https://www.gulpjs.com.cn/

gulp的优势

注意:当前学习的是gulp3.9.1版本,安装时请指定版本,默认安装的为最新的版本4.0,两版本有差别。

建立项目文件夹

gulp入门指南:https://www.gulpjs.com.cn/docs/getting-started/

开发环境,src文件夹

生产环境,build文件夹

gulp环境搭建

  • 全局安装gulp yarn global add gulp
  • 检查是否安装成功 gulp -v
  • 在本地路径安装gulp yarn add [email protected] -D
  • 安装完后查看package.json中的devDependencies是否有了gulp,以及版本是否正确
  • 在项目根目录创建一个gulpfile.js的文件
 
 
 
?x
 
 
 
 
var gulp = require(‘gulp‘); //引入gulp
?
gulp.task(‘default‘, function() { //创建一个任务
  //  console.log(‘执行任务‘)
});
 
  • 运行任务

    • 运行gulp 会执行默认(‘default‘)的task任务
    • 如果任务名字不是default而是 ‘aaa’(或其他),那么运行时应该执行gulp aaa
  • 运行时如果报错 *Cannot read property ‘apply‘ of undefined*,请重新安装一下gulp-clinpm i gulp-cli -g

开发环境向生产模式输出

复制文件 src -> dest

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘default‘,[‘task1‘],function(){
    return gulp.src(‘./src/**/*‘) 
    .pipe(gulp.dest(‘./build/‘)) 
    //src()读取文件
    //pipe()相当于下一步的意思
    //dest()输出文件
});
 

watch监听文件改变

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘watchfile‘,function(){
    gulp.watch(‘./src/index.html‘,function(){
        console.log(‘发现文件变化了‘)
    })
})
 

css

编译less文件

需要的插件:gulp-less

用法:https://www.npmjs.com/package/gulp-less

  • 本地安装gulp-less yarn add gulp-less -D

  • 安装完后查看package.json中的devDependencies是否有了

  • gulpfile顶部引入gulp-less

     
     
     
    xxxxxxxxxx
     
     
     
     
    var less = require(‘gulp-less‘);
     
  • 创建less任务

     
     
     
    xxxxxxxxxx
     
     
     
     
    gulp.task(‘less‘,function(){
        gulp.src(‘./src/less/*.less‘)  //读取less文件
        .pipe(less())        //编译less
        .pipe(gulp.dest(‘./src/css‘))  //输出到指定文件夹
    });
     

合并css文件

需要的插件:gulp-concat

  • 本地安装gulp-less yarn add gulp-concat -D

  • 安装完后查看package.json中的devDependencies是否有了

  • gulpfile顶部引入gulp-concat

     
     
     
    xxxxxxxxxx
     
     
     
     
    var less = require(‘gulp-less‘);
     
  • 创建concat任务

     
     
     
    xxxxxxxxxx
     
     
     
     
    gulp.task(‘concat‘,function(){
        gulp.src(‘./src/css/*.css‘)//读取less文件
        .pipe(concat(‘all.css‘))//合并css文件,并指定合并后文件的名字
        .pipe(gulp.dest(‘./src/css‘))//输出到指定文件夹
    });
     

css压缩

需要的插件:gulp-clean-css

安装和引入同上gulp-less

https://www.npmjs.com/package/gulp-clean-css

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘concat‘,function(){
    gulp.src(‘./src/css/*.css‘)//读取less文件
    .pipe(concat(‘all.css‘))//合并css文件,并指定合并后文件的名字
    .pipe(cleanCSS())//压缩合并后的css文件
    .pipe(gulp.dest(‘./src/css‘))//输出到指定文件夹
});
 

删除文件

需要的插件:del

安装和引入同上gulp-less

https://www.npmjs.com/package/del

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘del‘,function(){
    del([//参数为数组
        ‘./src/css/*.css‘,//要删除的文件
        ‘./build/*‘//要删除的文件
    ])
});
 

js

ES6 -> ES5

需要的插件:gulp-babel

https://www.npmjs.com/package/gulp-babel

  • 安装时请根据npm网站上的提示操作以免版本不一致导致报错:npm install --save-dev gulp-babel @babel/core @babel/preset-env

  • 创建js任务,把src中js文件中的js文件编译为es5后输出到build的js文件夹中

     
     
     
    xxxxxxxxxx
     
     
     
     
    gulp.task(‘js‘,function(){
        gulp.src(‘./src/js/*.js‘)//读取文件
        .pipe(babel({//编译,参数请参照npm网站上的提示
            presets:[‘@babel/env‘]
        }))
        .pipe(gulp.dest(‘./build/js‘))//输出文件
    });
     

合并js

需要的插件:concat(同css)

只需在编译后在concat一下

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘js‘,function(){
    gulp.src(‘./src/js/*.js‘)//读取文件
    .pipe(babel({//编译,参数请参照npm网站上的提示
        presets:[‘@babel/env‘]
    }))
    .pipe(concat(‘all.js‘))//合并编译后的js
    .pipe(gulp.dest(‘./build/js‘))//输出文件
});
 

压缩js

需要的插件

重命名

需要的插件:gulp-rename

安装和引入同上gulp-less

 
 
 
xxxxxxxxxx
 
 
 
 
.pipe(rename(‘./all.min.js‘)) gulp.task(‘js‘,function(){
    return gulp.src(‘./src/js/*.js‘)
    .pipe(babel({   //编译js
        presets:[‘@babel/env‘]
    }))
    .pipe(concat(‘all.js‘)) //合并js
    .pipe(uglify()) //压缩js
    .pipe(rename(‘./all.min.js‘))//此处路径是相对于之前的js文件(all.js)的路径
    .pipe(gulp.dest(‘./build/js‘))
    .pipe(reload({
        stream:true
    }))
});
 

图片

压缩图片

需要的插件:gulp-imagemin

https://www.npmjs.com/package/gulp-imagemin

  • 安装和引入同上gulp-less
  • 创建img任务,把图片压缩后输出到build目录下
 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘img‘,function(){
    gulp.src(‘./src/images/*‘)                                    //读取
    .pipe(imagemin([
        imagemin.gifsicle({interlaced:true}),                    //gif
        imagemin.jpegtran({progressive:true,arithmetic:true}),   //jpg
        imagemin.optipng({                                       //png
            optimizationLevel:5,
        }), 
        imagemin.svgo({                                         //svg
            plugins:[
                {removeViewBox:true},
                {cleanupIDs:false}
            ]
        })
    ],{verbose:true}))                              //log单个图片的压缩比
    .pipe(gulp.dest(‘./build/images‘))              //输出
});
 
  • 执行gulp img

精灵图/雪碧图

需要的插件:gulp-css-spriter

https://www.npmjs.com/package/gulp-css-spriter

  • 安装和引入同上gulp-less

  • 在合并css之后生成精灵图

     
     
     
    xxxxxxxxxx
     
     
     
     
    gulp.task(‘css‘,[‘less‘],function(){
        return gulp.src(‘./src/css/*.css‘)
        .pipe(concat(‘all.css‘))
        .pipe(spriter({//精灵图
            ‘spriteSheet‘: ‘./src/images/spritesheet.png‘,//精灵图名字,和输出路径
            ‘pathToSpriteSheetFromCSS‘: ‘../images/spritesheet.png‘//css中使用精灵图的路径
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest(‘./src/css‘))
    });
     
  • 执行gulp css

base64

需要的插件:gulp-base64

https://www.npmjs.com/package/gulp-base64

为什么要转base64?

可以减少请求,base64不用发送请求,小图适合转base64,

大图不适合,因为大图的base64字符串很长很长

使用;
  • 安装和引入同上gulp-less

  • 创建base64任务,把css检索,小图编译成base64输出到build目录下css

     
     
     
    xxxxxxxxxx
     
     
     
     
    gulp.task(‘base64‘,function(){
        return gulp.src(‘./src/css/*.css‘)
        .pipe(base64({
            baseDir: ‘./src/images‘,
            extensions: [‘svg‘, ‘png‘, /\.jpg#datauri$/i],
            exclude:    [/\.server\.(com|net)\/dynamic\//, ‘--live.jpg‘],
            maxImageSize: 5*1024, // bytes
            debug: true
        }))
        .pipe(gulp.dest(‘./build/css‘))
    });
     
  • 执行gulp base64

浏览器同步

浏览器实时、快速响应稳健更改Browsersync

http://www.browsersync.cn/

安装browser-sync并引入

先安装再引入

 
 
 
xxxxxxxxxx
 
 
 
 
var browserSync = require(‘browser-sync‘).create();//浏览器同步
 

开启静态服务器

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘server‘,function(){
    browserSync.init({
        server: {
            baseDir: "./",          //设置服务器跟目录
            index:‘./src/index.html‘  //设置首页
        },
        port:8080//设置端口号
    });
})
 

此时运行gulp server会自动打开浏览器,但修改源代码时浏览器并不会自动更新。

想要文件保存时浏览器自动更新就得进行重载

watch监听文件的改变

开启服务器的同时,我们可以通过watch监听文件的改变然后再重载相应的文件,就可以重新加载内容了

watch路径请勿使用./开头,./开头监听不到新增的文件

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.watch(‘src/*.html‘,[‘reload‘]);
gulp.watch(‘src/less/*.less‘,[‘css‘]);
gulp.watch(‘src/js/*.js‘,[‘js‘]);
 

引入重载模块

该模块是browserSync的子模块,不用重新安装引入即可

 
 
 
xxxxxxxxxx
 
 
 
 
var reload = browserSync.reload;//手动重载
 

我们可以在开启服务器的时候开始监听

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘server‘,function(){
    browserSync.init({
        server: {
           baseDir: "./",          //设置服务器跟目录
           index:‘./src/index.html‘  //设置首页
        },
        port:8080
    });
    gulp.watch(‘./src/*.html‘,[‘reload‘]);  //监听html改变就去执行reload
    gulp.watch(‘./src/less/*.less‘,[‘css‘]); //监听less改变就去执行css
    gulp.watch(‘./src/js/*.js‘,[‘js‘]);//监听js改变就去执行js
});
//reload任务用来重载html文件
gulp.task(‘reload‘,function(){
    gulp.src(‘./src/*.html‘) //读取文件
    .pipe(reload({ //对读取到的文件开启重载
        stream:true
    }))
});
//css任务执行完后记得也重载一次css
gulp.task(‘css‘,[‘less‘],function(){
    return gulp.src(‘./src/css/*.css‘)
    .pipe(concat(‘all.css‘)) //合并css
    .pipe(cleanCSS()) //压缩css
    .pipe(gulp.dest(‘./src/css‘))
    .pipe(reload({//重载css
        stream:true
    }))
});
//js任务执行完后记得也冲在一次js
gulp.task(‘js‘,function(){
    return gulp.src(‘./src/js/*.js‘)
    .pipe(babel({   //编译js
        presets:[‘@babel/env‘]
    }))
    .pipe(concat(‘all.min.js‘)) //合并js
    .pipe(uglify()) //压缩js
    .pipe(gulp.dest(‘./build/js‘))
    .pipe(reload({//重载
        stream:true
    }))
});
 

rev版本号

输出带版本号的css文件

需要的插件:gulp-rev

先安装gulp-rev,再引入(同gulp-less)

 
 
 
xxxxxxxxxx
 
 
 
 
return gulp.src(‘./src/css/*.css‘)
    .pipe(concat(‘all.css‘)) //合并css
    .pipe(cleanCSS()) //压缩css
    .pipe(rename({ suffix: ‘.min‘ }))
    .pipe(rev())//输出带版本号的css文件
    .pipe(gulp.dest(‘./build/css‘))
    .pipe(reload({
        stream:true
    }))
 

输出带版本号的.json映射文件

 
 
 
xxxxxxxxxx
 
 
 
 
return gulp.src(‘./src/css/*.css‘)
    .pipe(concat(‘all.css‘)) //合并css
    .pipe(cleanCSS()) //压缩css
    .pipe(rename({ suffix: ‘.min‘ }))
    .pipe(rev())//输出带版本号的css文件
    .pipe(gulp.dest(‘./build/css‘))//输出css
    .pipe(rev.manifest())//生成映射文件.json
    .pipe(gulp.dest(‘./rev/css/‘))//输出映射文件
    .pipe(reload({
        stream:true
    }))
 

替换html中的引入路径

需要的插件gulp-rev-collector
 
 
 
xxxxxxxxxx
 
 
 
 
var revCollector = require(‘gulp-rev-collector‘); //引入
 

创建rev任务,更新html中的所有引用路径

 
 
 
xxxxxxxxxx
 
 
 
 
gulp.task(‘rev‘,function(){
    gulp.src([‘./rev/**/*.json‘,‘./src/*.html‘])//读取到所有映射文件和html文件
    .pipe(revCollector({}))//替换字符创路径
    .pipe(gulp.dest(‘./build/‘))
});
 

其他插件

css3加前缀gulp-autoprefixer

删除文件gulp-clean

通知

需要的插件:gulp-notify

https://www.npmjs.com/package/gulp-notify

控制任务的同步异步执行

需要的插件:gulp-sequence

https://www.npmjs.com/package/gulp-sequence

 
 
 
xxxxxxxxxx
 
 
 
 
https://www.npmjs.com/package/gulp-sequence
 
 
 
 
xxxxxxxxxx
 
 
 
 
runSequence(‘build-clean‘,[‘build-scripts‘, ‘build-styles‘],‘build-html‘,callback)
 

以逗号隔开的为同步,按顺序从左到右,

数组内的为异步并行

插件应用时注意

如果该插件打包时老师报错,试试删除node文件重新install,

如果还不行,试试先移除该插件再用npm安装

以上是关于gulp打包的主要内容,如果未能解决你的问题,请参考以下文章

laravel中使用gulp打包发布前端部分

使用gulp打包普通项目

node.js 使用教程-2.Gulp 打包构建入门与使用

使用gulp自动化打包合并前端静态资源(CSSJS文件压缩添加版本号)

gulp 基于流格式的一种打包构建工具

gulp webpack 区别