手记

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

前言

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

安装

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

模块

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

项目结构

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

代码

压缩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

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

压缩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']);
如果您喜欢这篇文章,那么记得动动你们的,给个like或者关注我哦。
1人推荐
随时随地看视频
慕课网APP