成都新线加做网站/百度网页收录

前言

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