gulp压缩合并js与css

前言

webpack是应用非常广泛的打包软件，但是，webpack侧重于用 依赖管理整个静态资源。

假如没有依赖呢？

查了一番资料，准备使用gulp一试。

简介

gulp是一个基于流式的任务处理工具，以default任务为入口。

gulp.task('default', function() {
  // do you want
})

安装

我只需要如下功能，对应的安装包为：

• gulp 打包
• gulp-uglify 压缩js
• gulp-clean-css 压缩css
• gulp-imagemin 压缩图片
• gulp-concat 合并文件
• gulp-clean 清理文件夹

npm或者yarn安装

npm i -S gulp gulp-uglify gulp-clean-css gulp-imagemin gulp-concat gulp-clean

# 或

yarn add --dev gulp gulp-uglify gulp-clean-css gulp-imagemin gulp-concat gulp-clean

目录树结构

├── dist #打包后目录
├── src #源码目录
|   ├── js
|   |   └── lib #第三方包
|   ├── css
|   └── img
├── gulpfile.js #gulp配置文件
└── index.html #html文件

配置gulpfile.js

压缩合并 js

无依赖的项目中，js 加载顺序有时候会影响代码逻辑，所以把第三方包单独放入一个文件夹，先进行打包。

第三方包打包成vendor.js，其余逻辑打包成 app.js。

gulp.task('m-js', function() {
  gulp
    .src(SRC + 'js/lib/*.js')
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest(DEST + 'js'))

  gulp
    .src(SRC + 'js/*.js')
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gulp.dest(DEST + 'js'))
})

压缩合并css

gulp.task('m-css', () => {
  gulp
    .src(SRC + 'css/*.css')
    .pipe(concat('main.css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest(DEST + 'css'))
})

压缩图片

gulp.task('m-img', function() {
  gulp
    .src(SRC + 'img/*')
    .pipe(
      imagemin({
        progressive: true
      })
    )
    .pipe(gulp.dest(DEST + '/img'))
})

其他优化

清理目标文件夹

每次打包前需清理目标文件夹，且必须在清理之后才开始重新打包，所以在default任务里使用异步操作。

// 清除与打包异步执行
gulp.task('build', ['m-js', 'm-css', 'm-img'])

gulp.task('default', ['clean'], function() {
  return gulp.start('build')
})

最后文件的  整体代码如下：

// gulp核心文件
var gulp = require('gulp')
// 压缩js
var uglify = require('gulp-uglify')
// 压缩css
var cleanCSS = require('gulp-clean-css')
// 压缩图片
var imagemin = require('gulp-imagemin')
// 合并文件
var concat = require('gulp-concat')
// 清除打包目录
var clean = require('gulp-clean')

var SRC = 'src/'
var DEST = 'dist/'

// 压缩合并js
gulp.task('m-js', function() {
  gulp
    .src(SRC + 'js/lib/*.js')
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(gulp.dest(DEST + 'js'))

  gulp
    .src(SRC + 'js/*.js')
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gulp.dest(DEST + 'js'))
})
// 压缩合并css
gulp.task('m-css', () => {
  gulp
    .src(SRC + 'css/*.css')
    .pipe(concat('main.css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest(DEST + 'css'))
})
// 压缩图片
gulp.task('m-img', function() {
  gulp
    .src(SRC + 'img/*')
    .pipe(
      imagemin({
        progressive: true
      })
    )
    .pipe(gulp.dest(DEST + '/img'))
})
// 清除目标文件夹
gulp.task('clean', function() {
  return gulp.src('dist').pipe(clean())
})

// 开发的时候在命令行启动
// $ gulp auto
gulp.task('auto', function() {
  gulp.watch(SRC + 'js/lib/*', ['m-js'])
  gulp.watch(SRC + 'js/*', ['m-js'])
  gulp.watch(SRC + 'css/*.css', ['m-css'])
  gulp.watch(SRC + 'img/*', ['m-img'])
})

// 清除与打包异步执行
gulp.task('build', ['m-js', 'm-css', 'm-img'])

// gulp 入口
gulp.task('default', ['clean'], function() {
  return gulp.start('build')
})

监听

开发时需要监听目标文件的改动，立即打包。

gulp.task('auto', function() {
  gulp.watch(SRC + 'js/lib/*', ['m-js'])
  gulp.watch(SRC + 'js/*', ['m-js'])
  gulp.watch(SRC + 'css/*.css', ['m-css'])
  gulp.watch(SRC + 'img/*', ['m-img'])
})

使用

设置 package.json 的脚本。

• 打包 npm run build
• 开发时监听 npm run dev

{
  "scripts": {
    "build": "gulp --config gulpfile.js",
    "dev": "gulp auto"
  }
}

后记

这个工具还是用得少，目前发现的一些不足：

• js里不能使用es6语法，不然报错

毕竟现在使用es6的import才是规范，情况允许的情况下还是使用webpack更好。

demo