前言

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')// 压缩jsvar uglify = require('gulp-uglify')// 压缩cssvar 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/'// 压缩合并jsgulp.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'))})// 压缩合并cssgulp.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 autogulp.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更好。