前言
- gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化,而且在开发过程中能够通过配置自动完成很多重复的任务,让我们可以专注于代码,提高工作效率
- gulp的用处当然不只用来压缩、合并文件,本文只是讲这两个用途
- 官网文档
安装
在项目目录下
npm install gulp --save
模块
- gulp-uglify — 压缩javascript模块
- gulp-clean-css — 压缩css模块
- gulp-imagemin — 压缩图片模块
- gulp-rename — 重命名模块
- gulp-concat — 合并模块
一次性安装以上模块
npm install gulp-uglify gulp-clean-css gulp-imagemin gulp-rename gulp-concat --save
项目结构
gulp入口文件必须命名为gulpfile.js
dir.png
代码
压缩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文件,以下是代码对比图
contrast.png压缩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']);
网友评论