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

由于项目业务的需要，还有服务器带宽的昂贵，所以不得不把项目响应速度优化又优化，才能在服务器上面跑的更快… 特别是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
生成两个文件，在项目中引入即可。