容易好用的gulp让程序飞起来

Love The Way You Lie 2022-11-28 00:51 143阅读 0赞

由于项目业务的需要，还有服务器带宽的昂贵，所以不得不把项目响应速度优化又优化，才能在服务器上面跑的更快… 特别是bootstrap 响应页面漫天飞的时候，这些问题，你就不得不考虑，当然vue前后端分离页面的却做的相当不错，速度大大的提升。 vue项目这里就不说了，通过webpack就能打包运行 飞快的跑起来，今天要说的gulp让bootstrap项目也快速的跑起来。

那gulp怎么让程序快速跑起来呢?

其实就是gulp它强大的 合并压缩功能了，可以把多个js文件 css文件进行合并并且压缩，减少页面的请求次数。提高效率。

要用gulp，首先先安装nodejs ，然后通过npm方式 安装gulp  
(1)先全局安装：  
npm install --global gulp  
(2)在项目里面局部安装:  
npm install gulp --save-dev  
(3)在安装下面的组件  
gulp-minify-css: 压缩css  
gulp-jshint: 检查js  
gulp-uglify: 压缩js  
gulp-concat: 合并文件  
gulp-rename: 重命名文件  
gulp-clean: 清空文件夹  
gulp-notify:提示

npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev  
(4)在项目根下面创建gulpfile.js文件

//css处理
    gulp.task('minifycss',function(){ 
        return gulp.src(['src/main/resources/static/front/assets/vendor/remixicon/remixicon.css',
            'src/main/resources/static/front/assets/vendor/owl.carousel/assets/owl.carousel.min.css',
            'src/main/resources/static/front/assets/vendor/aos/aos.css',
            'src/main/resources/static/front/assets/css/style.css',
            'src/main/resources/static/js/jconfirm/jquery-confirm.min.css'])      //设置css
            .pipe(concat('frontindex.css'))      //合并css文件到"frontindex.css"
            .pipe(gulp.dest('dist/styles'))           //设置输出路径
            .pipe(rename({ suffix:'.min'}))         //修改文件名
            .pipe(minifycss())                    //压缩文件
            .pipe(gulp.dest('dist/styles'))            //输出文件目录
            .pipe(notify({ message:'css task ok'}));   //提示成功
    });
    
    //JS处理
    gulp.task('minifyjs',function(){ 
        return gulp.src(['src/main/resources/static/front/assets/vendor/jquery/jquery.min.js',
        'src/main/resources/static/front/assets/vendor/bootstrap/js/bootstrap.bundle.min.js',
        'src/main/resources/static/front/assets/vendor/jquery.easing/jquery.easing.min.js',
        'src/main/resources/static/front/assets/vendor/php-email-form/validate.js',
        'src/main/resources/static/front/assets/vendor/owl.carousel/owl.carousel.min.js',
        'src/main/resources/static/front/assets/vendor/venobox/venobox.min.js',
        'src/main/resources/static/front/assets/vendor/isotope-layout/isotope.pkgd.min.js',
        'src/main/resources/static/front/assets/vendor/aos/aos.js',
        'src/main/resources/static/js/jconfirm/jquery-confirm.min.js',
        'src/main/resources/static/front/assets/js/main.js'])  //选择合并的JS
            .pipe(concat('frontindex.js'))   //合并js
            .pipe(gulp.dest('dist/js'))         //输出
            .pipe(rename({ suffix:'.min'}))     //重命名
            .pipe(uglify())                    //压缩
            .pipe(gulp.dest('dist/js'))            //输出
            .pipe(notify({ message:"js task ok"}));    //提示
    });

（5）最后运行 gulp  
生成两个文件，在项目中引入即可。  
![在这里插入图片描述][20200816201819497.png_pic_center]

[20200816201819497.png_pic_center]: /images/20221124/d347775862f54830862e58457d1112bc.png