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'])
gulp的简单打包示例(一)的更多相关文章
- gulp实现自动化打包(二)
引言 在这篇文章中我基于上一篇文章gulp的简单打包示例(一)的代码(重点,不然看的懵逼状态)来介绍gulp的自动化打包,主要是修改gulpfile.js配置文件.当我们执行gulp任务,gulp自动 ...
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- webpack gulp grunt 简单介绍
本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...
- 【java开发系列】—— spring简单入门示例
1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...
- Springmvc整合tiles框架简单入门示例(maven)
Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...
- hadoop环境安装及简单Map-Reduce示例
说明:这篇博客来自我的csdn博客,http://blog.csdn.net/lxxgreat/article/details/7753511 一.参考书:<hadoop权威指南--第二版(中文 ...
- EasyHook远注简单监控示例 z
http://www.csdn 123.com/html/itweb/20130827/83559_83558_83544.htm 免费开源库EasyHook(inline hook),下面是下载地址 ...
- Web Service简单入门示例
Web Service简单入门示例 我们一般实现Web Service的方法有非常多种.当中我主要使用了CXF Apache插件和Axis 2两种. Web Service是应用服务商为了解决 ...
- Ext简单demo示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- Z字形变换 leetcode 6
一.按行存储 1.解题思路 1.通过当前行的不断上下循环移动 2.将字符按序存放入vector中 3.最后再按行取出 2.代码及注释 class Solution { public: string c ...
- Jenkins配置QQ邮箱发送邮件
1.登陆QQ邮箱 2. 在“帐户”里开启“POP3/SMTP”并获取授权码 3. 发送短信验证验证后得到下面验证码 aeoygabszxfecbdj #验证吗 点击确定之后,服务已经开启 4. Jen ...
- 搜索排序-learning to Rank简介
Learning to Rank pointwise \[ L\left(f ; x_{j}, y_{j}\right)=\left(y_{j}-f\left(x_{j}\right)\right)^ ...
- SingletonPattern(单例模式)-----Java/.Net
单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一. 这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一个单一的类,该类负责创建自己的 ...
- 双系统,重装windows 无法进入Windows安装界面
解决办法 windows引导并没有被更新 进入linux 更新grub sudo update-grub 然后重启电脑,进行下一步安装 原理 grub是引导操作系统的程序,它会根据自己的配置文件,去引 ...
- 克隆linux系统后,将eth1修改成eth0
使用VMware克隆的linux系统之后,发现网卡信息只有eth1,却没有eth0.将eth1修改成eth0. 1.vi /etc/udev/rules.d/70-persistent-net.rul ...
- ECOS问题解决记录
1.finder自定义列 http://club.ec-os.net/doc/ecos/framework-ecos/advance/desktop/dev.html#id5 2.命令行工具 地址 h ...
- Magicodes.IE之Excel模板导出教材订购表
说明 本教程主要说明如果使用Magicodes.IE.Excel完成教材订购表的Excel模板导出. 要点 本教程使用Magicodes.IE.Excel来完成Excel模板导出 需要通过创建Dto来 ...
- Scala与Mongodb实践3-----运算环境的搭建
目的:使的在IDEA中编辑代码,令代码实现mongodb运算,且转换较为便捷 由实验2可知,运算环境的搭建亦需要对数据进行存储和计算,故需要实现类型转换,所以在实验2的基础上搭建环境. 由菜鸟教程可得 ...
- Spring Boot2 系列教程 (六) | 使用 JdbcTemplates 访问 Mysql
前言 如题,今天介绍 springboot 通过jdbc访问关系型mysql,通过 spring 的 JdbcTemplate 去访问. 准备工作 SpringBoot 2.x jdk 1.8 mav ...