Gulp压缩、合并静态资源了解一下？

前言

gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率
gulp的用处当然不只用来压缩、合并文件，本文只是讲这两个用途
官网文档

安装

在项目目录下
npm install gulp --save

模块

gulp-uglify — 压缩javascript模块
gulp-clean-css — 压缩css模块
gulp-imagemin — 压缩图片模块
gulp-rename — 重命名模块
gulp-concat — 合并模块

一次性安装以上模块
npm install gulp-uglify gulp-clean-css gulp-imagemin gulp-rename gulp-concat --save

项目结构

gulp入口文件必须命名为gulpfile.js

dir.png

代码

压缩javascript文件

var gulp = require('gulp'); // 引入gulp
var uglify = require('gulp-uglify'); // 引入uglify模块
var rename = require('gulp-rename'); // 引入rename模块

// jscompress是任务名字，设置为default，启动gulp压缩的时候可以省去任务名
gulp.task('jscompress', function () {
  return gulp.src(['./javascript/common.js', './javascript/index.js']) // 压缩common、index
    .pipe(uglify()) // 压缩js方法
    .pipe(rename({suffix: '.min'})) // 为所有压缩的js都加.min后缀
    .pipe(gulp.dest('./javascript')) // 输出的目录
})

命令行启动gulp的jscompress任务
gulp jscompress

javascripts.png

可以看到最后会输出对应的min.js文件，以下是代码对比图

contrast.png

压缩css文件

var clean = require('gulp-clean-css'); // 引入clean-css模块

gulp.task('csscompress', function () {
  return gulp.src(['./stylesheets/common.css', './stylesheets/index.css']) // 压缩common、index
    .pipe(clean()) // 压缩css方法
    .pipe(rename({suffix: '.min'})) // 同js一样，加上.min后缀
    .pipe(gulp.dest('./stylesheets')) // 输出的文件夹
})

命令行启动gulp的csscompress任务
gulp csscompress

压缩image文件

var imagemin = require('gulp-imagemin');

gulp.task('imagecompress', function () {
// 也可以这样写src('./images/*.*)，表示压缩images目录下的所有文件，但你必须得放符合图片格式的文件
  return gulp.src(['./images/*.jpg', './images/*.png'])
    .pipe(imagemin()) // 压缩图片方法
    .pipe(gulp.dest('./images')) // 图片就不需要重命名啦，直接覆盖原来的
})

命令行启动gulp的imagecompress任务
gulp imagecompress

合并文件

var concat = require('gulp-concat'); // 引入合并模块

gulp.task('concatJs', function () {
  return gulp.src(['/javascripts/index.js', './javascripts/common.js']) // 需要合并的js集合，或者全部src('./javascripts/*.js')
    .pipe(concat('concat.js')) // 合并后的文件名字
    .pipe(gulp.dest('./javascript')) // 输出的文件夹
})

命令行启动gulp的concatJs任务
gulp concatJs

任务合并，执行那么多次命令很麻烦？

gulp.task('default', ['jscompress', 'csscompress', 'imagecompress', 'concatJs']);

命令行启动gulp中的所有任务
gulp

监听文件的改动自动执行压缩、合并等任务

gulp.task('auto', function () {
  // 监听javascripts目录下的所有js文件，如果发生改动（当您ctrl+s），那么就会执行jscompress任务
  gulp.watch('./javascripts/*.js', ['jscompress']);
  gulp.watch('./stylesheets/*.css', ['csscompress']);
})

完整的gulpfile.js代码

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

// 压缩js
gulp.task('jscompress', function () {
  return gulp.src(['./javascripts/common.js', './javascripts/index.js'])
    .pipe(uglify())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./javascripts'))
})

// 压缩css
gulp.task('csscompress', function () {
  return gulp.src(['./stylesheets/common.css', './stylesheets/index.css'])
    .pipe(clean())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./stylesheets'))
})

// 压缩image
gulp.task('imagecompress', function () {
  return gulp.src(['./images/*.jpg', './images/*.png'])
    .pipe(imagemin())
    .pipe(gulp.dest('./images'))
})

// 合并js
gulp.task('concatJs', function () {
  return gulp.src(['/javascripts/index.js', './javascripts/common.js'])
    .pipe(concat('concat.js'))
    .pipe(gulp.dest('./javascripts'))
})

// 监听js和css的改动
gulp.task('auto', function () {
  gulp.watch('./javascripts/*.js', ['jscompress']);
  gulp.watch('./stylesheets/*.css', ['csscompress']);
})

// 默认任务
gulp.task('default', ['jscompress', 'csscompress', 'imagecompress', 'concatJs']);

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦

image

微信公众号 「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习