gulp打包

Posted 2021-11-11 xiaoyue-

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安装