前言
webpack是应用非常广泛的打包软件，但是，webpack侧重于用 依赖管理整个静态资源。
假如没有依赖呢？
查了一番资料，准备使用gulp一试。
简介
gulp是一个基于流式的任务处理工具，以default任务为入口。
gulp.task('default', function() { // do you want})复制代码复制代码 安装
我只需要如下功能，对应的安装包为：
gulp打包gulp-uglify压缩jsgulp-clean-css压缩cssgulp-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更好。
