引言

  • 前端开发,打包工具是必不可少的,虽然有很多别人帮你封装好的打包工具,但自己配置一个,自身的实力也会大增呀。这篇博文主要讲的是使用gulphtml、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

全局安装

  1. npm install --global gulp

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

  1. npm install --save-dev gulp

我的项目结构

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

gulpfile.js文件的配置

下载插件

  1. "devDependencies": {
  2. "gulp": "^3.9.1",
  3. //html
  4. "gulp-htmlmin": "^5.0.1",
  5. //图片
  6. "gulp-imagemin": "^5.0.3",
  7. //less
  8. "gulp-less": "^4.0.1",
  9. //css
  10. "gulp-minify-css": "^1.2.4",
  11. //js
  12. "gulp-uglify": "^3.0.1",
  13. //js、css的合并
  14. "gulp-concat": "^2.6.1"
  15. }

引入需要的插件

  1. var gulp = require('gulp')
  2. var concat = require('gulp-concat')
  3. var htmlmin = require('gulp-htmlmin')
  4. var uglify = require('gulp-uglify')
  5. var less = require('gulp-less')
  6. var minifyCss = require('gulp-minify-css')
  7. var imagemin = require('gulp-imagemin')
  8. var rename = require('gulp-rename')

html文件的压缩

  1. gulp.task('html', function () {
  2. return gulp.src('./src/*.html')
  3. .pipe(htmlmin({
  4. collapseWhitespace: true,//清除html文件的空格
  5. minifyJS: true,//压缩html文件的js代码
  6. minifyCSS:true,//压缩html文件的css代码
  7. removeComments: true,//清除html文件的注释
  8. removeSciptTypeAttributes: true,//清除所有script标签中的type="text/javascript"属性
  9. removeStyleLinkTypeAttributes: true//清楚所有Link标签上的type属性
  10. }))
  11. .pipe(gulp.dest('./dist/'))//最后输出文件保存在dist文件根目录中
  12. })

js代码的压缩

  1. //压缩、合并js文件
  2. gulp.task('js', function () {
  3. return gulp.src('./src/js/*.js')
  4. .pipe(concat('built.js')) //合并到临时文件
  5. .pipe(gulp.dest('./dist/js/')) //生成到目标文件夹
  6. .pipe(rename({
  7. dirname: "index", // 路径名
  8. basename: "goodbye", // 主文件名
  9. prefix: "pre-", // 前缀
  10. suffix: "-min", // 后缀
  11. extname: ".js" // 扩展名
  12. }))
  13. .pipe(uglify())
  14. .pipe(gulp.dest('./dist/js/'))
  15. })

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

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

  1. //less文件编译为css文件
  2. gulp.task('less', function () {
  3. return gulp.src('./src/less/*.less')
  4. .pipe(less())
  5. .pipe(gulp.dest('./src/css/'))
  6. })
  7. //合并、重命名、压缩css文件
  8. gulp.task('css', ['less'], function () {
  9. return gulp.src('./src/css/*.css')
  10. .pipe(concat('build.css'))//合并到临时文件
  11. .pipe(gulp.dest('./dist/css/'))//合并文件build.css输出路径
  12. .pipe(rename({
  13. dirname: "index", // 路径名
  14. basename: "index", // 主文件名
  15. prefix: "cs-", // 前缀
  16. suffix: "-min", // 后缀
  17. extname: ".css" // 扩展名
  18. }))
  19. .pipe(minifyCss())
  20. .pipe(gulp.dest('./dist/css/'))
  21. })

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

图片的压缩

  1. //压缩图片
  2. gulp.task('img', function () {
  3. return gulp.src('./src/imgs/*.*')
  4. .pipe(imagemin({progressive: true}))
  5. .pipe(gulp.dest('./dist/imgs/'))
  6. })

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

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

完整的gulpfile.js文件

  1. var gulp = require('gulp')
  2. var concat = require('gulp-concat')
  3. var htmlmin = require('gulp-htmlmin')
  4. var uglify = require('gulp-uglify')
  5. var less = require('gulp-less')
  6. var minifyCss = require('gulp-minify-css')
  7. var imagemin = require('gulp-imagemin')
  8. var rename = require('gulp-rename')
  9. //压缩 主页 html文件
  10. gulp.task('html', function () {
  11. return gulp.src('./src/*.html')
  12. .pipe(htmlmin({
  13. collapseWhitespace: true,
  14. minifyJS: true,
  15. minifyCSS:true,
  16. removeComments: true,
  17. removeSciptTypeAttributes: true,
  18. removeStyleLinkTypeAttributes: true
  19. }))
  20. .pipe(gulp.dest('./dist/'))
  21. })
  22. //压缩子页面的html
  23. gulp.task('pages', function () {
  24. return gulp.src('./src/pages/*.html')
  25. .pipe(htmlmin({
  26. collapseWhitespace: true,
  27. minifyJS: true,
  28. minifyCSS:true,
  29. removeComments: true,
  30. removeSciptTypeAttributes: true,
  31. removeStyleLinkTypeAttributes: true
  32. }))
  33. .pipe(gulp.dest('./dist/pages/'))
  34. })
  35. //压缩js文件
  36. gulp.task('js', function () {
  37. return gulp.src('./src/js/*.js')
  38. .pipe(concat('build.js')) //合并到临时文件
  39. .pipe(gulp.dest('./dist/js/')) //生成到目标文件夹
  40. .pipe(rename({
  41. dirname: "index", // 路径名
  42. basename: "index", // 主文件名
  43. prefix: "cs-", // 前缀
  44. suffix: "-min", // 后缀
  45. extname: ".js" // 扩展名
  46. }))
  47. .pipe(uglify())
  48. .pipe(gulp.dest('./dist/js/'))
  49. })
  50. //压缩less文件
  51. gulp.task('less', function () {
  52. return gulp.src('./src/less/*.less')
  53. .pipe(less())
  54. .pipe(gulp.dest('./src/css/'))
  55. })
  56. //压缩css文件
  57. gulp.task('css', ['less'], function () {
  58. return gulp.src('./src/css/*.css')
  59. .pipe(concat('build.css'))//合并到临时文件
  60. .pipe(gulp.dest('./dist/js/'))//生成到目标文件夹
  61. .pipe(rename({
  62. dirname: "index", // 路径名
  63. basename: "index", // 主文件名
  64. prefix: "cs-", // 前缀
  65. suffix: "-min", // 后缀
  66. extname: ".css" // 扩展名
  67. }))
  68. .pipe(minifyCss())
  69. .pipe(gulp.dest('./dist/css/'))
  70. })
  71. //压缩图片
  72. gulp.task('img', function () {
  73. return gulp.src('./src/imgs/*.*')
  74. .pipe(imagemin({progressive: true}))
  75. .pipe(gulp.dest('./dist/imgs/'))
  76. })
  77. //注册一个默认的任务
  78. gulp.task('default', ['html', 'pages', 'css', 'less', 'js', 'img'])

gulp的简单打包示例(一)的更多相关文章

  1. gulp实现自动化打包(二)

    引言 在这篇文章中我基于上一篇文章gulp的简单打包示例(一)的代码(重点,不然看的懵逼状态)来介绍gulp的自动化打包,主要是修改gulpfile.js配置文件.当我们执行gulp任务,gulp自动 ...

  2. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  3. webpack gulp grunt 简单介绍

    本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...

  4. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  5. Springmvc整合tiles框架简单入门示例(maven)

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  6. hadoop环境安装及简单Map-Reduce示例

    说明:这篇博客来自我的csdn博客,http://blog.csdn.net/lxxgreat/article/details/7753511 一.参考书:<hadoop权威指南--第二版(中文 ...

  7. EasyHook远注简单监控示例 z

    http://www.csdn 123.com/html/itweb/20130827/83559_83558_83544.htm 免费开源库EasyHook(inline hook),下面是下载地址 ...

  8. Web Service简单入门示例

    Web Service简单入门示例     我们一般实现Web Service的方法有非常多种.当中我主要使用了CXF Apache插件和Axis 2两种. Web Service是应用服务商为了解决 ...

  9. Ext简单demo示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. Z字形变换 leetcode 6

    一.按行存储 1.解题思路 1.通过当前行的不断上下循环移动 2.将字符按序存放入vector中 3.最后再按行取出 2.代码及注释 class Solution { public: string c ...

  2. Jenkins配置QQ邮箱发送邮件

    1.登陆QQ邮箱 2. 在“帐户”里开启“POP3/SMTP”并获取授权码 3. 发送短信验证验证后得到下面验证码 aeoygabszxfecbdj #验证吗 点击确定之后,服务已经开启 4. Jen ...

  3. 搜索排序-learning to Rank简介

    Learning to Rank pointwise \[ L\left(f ; x_{j}, y_{j}\right)=\left(y_{j}-f\left(x_{j}\right)\right)^ ...

  4. SingletonPattern(单例模式)-----Java/.Net

    单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一. 这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一个单一的类,该类负责创建自己的 ...

  5. 双系统,重装windows 无法进入Windows安装界面

    解决办法 windows引导并没有被更新 进入linux 更新grub sudo update-grub 然后重启电脑,进行下一步安装 原理 grub是引导操作系统的程序,它会根据自己的配置文件,去引 ...

  6. 克隆linux系统后,将eth1修改成eth0

    使用VMware克隆的linux系统之后,发现网卡信息只有eth1,却没有eth0.将eth1修改成eth0. 1.vi /etc/udev/rules.d/70-persistent-net.rul ...

  7. ECOS问题解决记录

    1.finder自定义列 http://club.ec-os.net/doc/ecos/framework-ecos/advance/desktop/dev.html#id5 2.命令行工具 地址 h ...

  8. Magicodes.IE之Excel模板导出教材订购表

    说明 本教程主要说明如果使用Magicodes.IE.Excel完成教材订购表的Excel模板导出. 要点 本教程使用Magicodes.IE.Excel来完成Excel模板导出 需要通过创建Dto来 ...

  9. Scala与Mongodb实践3-----运算环境的搭建

    目的:使的在IDEA中编辑代码,令代码实现mongodb运算,且转换较为便捷 由实验2可知,运算环境的搭建亦需要对数据进行存储和计算,故需要实现类型转换,所以在实验2的基础上搭建环境. 由菜鸟教程可得 ...

  10. Spring Boot2 系列教程 (六) | 使用 JdbcTemplates 访问 Mysql

    前言 如题,今天介绍 springboot 通过jdbc访问关系型mysql,通过 spring 的 JdbcTemplate 去访问. 准备工作 SpringBoot 2.x jdk 1.8 mav ...