gulp不生成打包文件_gulp的简单打包示例(一)

引言

前端开发，打包工具是必不可少的，虽然有很多别人帮你封装好的打包工具，但自己配置一个，自身的实力也会大增呀。这篇博文主要讲的是使用gulp对html、js、less、css、图片的压缩合并等配置。同时也可以阅读我另外一篇博文gulp实现自动化打包(二)

gulp的API文档

主要有四个，下面是我的简单理解，详细请看中文文档 gulp

一：gulp.src(globs[, options]) --->指向指定路径的所有文件, 返回文件流对象，即为要操作的文件路径，可以是数组

二：gulp.dest(path[, options]) --->当操作完源文件，输出目标文件的路径

三：gulp.task(name[, deps], fn) --->注册一个任务，在项目根目录输入、执行命令gulp name 可以执行相应的任务

四：gulp.watch(glob[, opts], tasks) --->可以监视某个文件是否变化

下载安装gulp

全局安装

npm install --global gulp

项目安装，即为项目的根目录安装gulp

npm install --save-dev gulp

我的项目结构

每个人的项目结构，有所不同，但这不是重点

gulpfile.js文件的配置

下载插件

"devDependencies": {

"gulp": "^3.9.1",

//html

"gulp-htmlmin": "^5.0.1",

//图片

"gulp-imagemin": "^5.0.3",

//less

"gulp-less": "^4.0.1",

//css

"gulp-minify-css": "^1.2.4",

//js

"gulp-uglify": "^3.0.1",

//js、css的合并

"gulp-concat": "^2.6.1"

}

引入需要的插件

var gulp = require('gulp')

var concat = require('gulp-concat')

var htmlmin = require('gulp-htmlmin')

var uglify = require('gulp-uglify')

var less = require('gulp-less')

var minifyCss = require('gulp-minify-css')

var imagemin = require('gulp-imagemin')

var rename = require('gulp-rename')

html文件的压缩

gulp.task('html', function () {

return gulp.src('./src/*.html')

.pipe(htmlmin({

collapseWhitespace: true,//清除html文件的空格

minifyJS: true,//压缩html文件的js代码

minifyCSS:true,//压缩html文件的css代码

removeComments: true,//清除html文件的注释

removeSciptTypeAttributes: true,//清除所有script标签中的type="text/javascript"属性

removeStyleLinkTypeAttributes: true//清楚所有Link标签上的type属性

}))

.pipe(gulp.dest('./dist/'))//最后输出文件保存在dist文件根目录中

})

js代码的压缩

//压缩、合并js文件

gulp.task('js', function () {

return gulp.src('./src/js/*.js')

.pipe(concat('built.js')) //合并到临时文件

.pipe(gulp.dest('./dist/js/')) //生成到目标文件夹

.pipe(rename({

dirname: "index", // 路径名

basename: "goodbye", // 主文件名

prefix: "pre-", // 前缀

suffix: "-min", // 后缀

extname: ".js" // 扩展名

}))

.pipe(uglify())

.pipe(gulp.dest('./dist/js/'))

})

执行任务之后的dist文件夹目录

less、css的压缩合并，首先进行的是less编译为css文件，编译的css文件还是输出在src/css文件夹中，再进行css文件的压缩合并

//less文件编译为css文件

gulp.task('less', function () {

return gulp.src('./src/less/*.less')

.pipe(less())

.pipe(gulp.dest('./src/css/'))

})

//合并、重命名、压缩css文件

gulp.task('css', ['less'], function () {

return gulp.src('./src/css/*.css')

.pipe(concat('build.css'))//合并到临时文件

.pipe(gulp.dest('./dist/css/'))//合并文件build.css输出路径

.pipe(rename({

dirname: "index", // 路径名

basename: "index", // 主文件名

prefix: "cs-", // 前缀

suffix: "-min", // 后缀

extname: ".css" // 扩展名

}))

.pipe(minifyCss())

.pipe(gulp.dest('./dist/css/'))

})

执行任务之后的dist文件夹目录

图片的压缩

//压缩图片

gulp.task('img', function () {

return gulp.src('./src/imgs/*.*')

.pipe(imagemin({progressive: true}))

.pipe(gulp.dest('./dist/imgs/'))

})

注册一个默认的任务default，当执行gulp default时， ['html', 'pages', 'css', 'less', 'js', 'img']里面的任务都会被执行一遍，因此就不用分别执行每一个任务

gulp.task('default', ['html', 'pages', 'css', 'less', 'js', 'img'])

完整的gulpfile.js文件

var gulp = require('gulp')

var concat = require('gulp-concat')

var htmlmin = require('gulp-htmlmin')

var uglify = require('gulp-uglify')

var less = require('gulp-less')

var minifyCss = require('gulp-minify-css')

var imagemin = require('gulp-imagemin')

var rename = require('gulp-rename')

//压缩 主页 html文件

gulp.task('html', function () {

return gulp.src('./src/*.html')

.pipe(htmlmin({

collapseWhitespace: true,

minifyJS: true,

minifyCSS:true,

removeComments: true,

removeSciptTypeAttributes: true,

removeStyleLinkTypeAttributes: true

}))

.pipe(gulp.dest('./dist/'))

})

//压缩子页面的html

gulp.task('pages', function () {

return gulp.src('./src/pages/*.html')

.pipe(htmlmin({

collapseWhitespace: true,

minifyJS: true,

minifyCSS:true,

removeComments: true,

removeSciptTypeAttributes: true,

removeStyleLinkTypeAttributes: true

}))

.pipe(gulp.dest('./dist/pages/'))

})

//压缩js文件

gulp.task('js', function () {

return gulp.src('./src/js/*.js')

.pipe(concat('build.js')) //合并到临时文件

.pipe(gulp.dest('./dist/js/')) //生成到目标文件夹

.pipe(rename({

dirname: "index", // 路径名

basename: "index", // 主文件名

prefix: "cs-", // 前缀

suffix: "-min", // 后缀

extname: ".js" // 扩展名

}))

.pipe(uglify())

.pipe(gulp.dest('./dist/js/'))

})

//压缩less文件

gulp.task('less', function () {

return gulp.src('./src/less/*.less')

.pipe(less())

.pipe(gulp.dest('./src/css/'))

})

//压缩css文件

gulp.task('css', ['less'], function () {

return gulp.src('./src/css/*.css')

.pipe(concat('build.css'))//合并到临时文件

.pipe(gulp.dest('./dist/js/'))//生成到目标文件夹

.pipe(rename({

dirname: "index", // 路径名

basename: "index", // 主文件名

prefix: "cs-", // 前缀

suffix: "-min", // 后缀

extname: ".css" // 扩展名

}))

.pipe(minifyCss())

.pipe(gulp.dest('./dist/css/'))

})

//压缩图片

gulp.task('img', function () {

return gulp.src('./src/imgs/*.*')

.pipe(imagemin({progressive: true}))

.pipe(gulp.dest('./dist/imgs/'))

})

//注册一个默认的任务

gulp.task('default', ['html', 'pages', 'css', 'less', 'js', 'img'])