项目发布时,需要对项目js文件进行压缩,混淆,连接等操作以减小项目http请求,加快访问。

gulpjs.com中有很多插件可以用来配置打包部署。

需要用的常用插件有:

gulp-jsmin  压缩js

gulp-minify-css  压缩css

gulp-imagemin  压缩图片

gulp-rename  重命名

gulp-clean  清空文件夹

gulp-copy  拷贝引用库,字体等文件

gulp-replace  替换html内容(将原来.js引用改为.min.js引用)

前置过程不再赘述,安装插件:

  1. npm install --save-dev gulp gulp-jsmin gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-copy gulp-replace
  1. const gulp = require('gulp'),
  2. jsmin = require('gulp-jsmin'),
  3. cssmin = require('gulp-minify-css'),
  4. rename = require('gulp-rename'),
  5. copy = require('gulp-copy'),
  6. clean = require('gulp-clean'),
  7. imagemin = require('gulp-imagemin'),
  8. replace = require('gulp-replace');
  9.  
  10. // 清空文件夹
  11. gulp.task('clean', () => {
  12. gulp.src('dist')
  13. .pipe(clean())
  14. })
  15.  
  16. // js压缩
  17. gulp.task('jsmin', () => {
  18. gulp.src('js/*.js')
  19. .pipe(jsmin())
  20. .pipe(rename({
  21. suffix: '.min'
  22. }))
  23. .pipe(gulp.dest('dist/js'));
  24. });
  25.  
  26. // css压缩
  27. gulp.task('cssmin', () => {
  28. gulp.src('css/*.css')
  29. .pipe(cssmin())
  30. .pipe(rename({
  31. suffix: '.min'
  32. }))
  33. .pipe(gulp.dest('dist/css'))
  34. });
  35.  
  36. // 压缩图片
  37. gulp.task('imagemin', () => {
  38. gulp.src('images/*')
  39. .pipe(imagemin())
  40. .pipe(gulp.dest('dist/images/'))
  41. });
  42.  
  43. // 复制文件
  44. gulp.task('copy', () => {
  45. gulp.src('lib/**/*')
  46. .pipe(copy('dist'))
  47. });
  48.  
  49. // 替换HTML中的js及css引用为.min引用
  50. gulp.task('replace', () => {
  51. gulp.src('index.html')
  52. .pipe(replace(/js\/.*\./g, '$&min.'))
  53. .pipe(replace(/css\/.*\./g, '$&min.'))
  54. .pipe(gulp.dest('dist'))
  55. });
  56.  
  57. // 部署任务
  58. gulp.task('deploy', [
  59. 'clean',
  60. 'jsmin',
  61. 'cssmin',
  62. 'imagemin',
  63. 'copy',
  64. 'replace'
  65. ]);

以上,即可完成一套前端项目的打包。

gulp 配置前端项目打包的更多相关文章

  1. Android使用gradle不同配置多项目打包

    //build.gradle该配置文件里路径均是相对路径 apply plugin: 'com.android.application' android { def suffix = "su ...

  2. vue2.0 配置build项目打包目录、资源文件(assets\static)打包目录

    vue项目默认的打包路径:根目录下的dist文件夹下: 但是在项目开发中,我们肯定希望项目提交到svn目录或者git目录下,否则每次复制过去,太麻烦了: 那怎么配置打包路径呢?下面来看看: 我们找到打 ...

  3. springboot系列三、springboot 单元测试、配置访问路径、多个配置文件和多环境配置,项目打包发布

    一.单元测试 生成的demo里面包含spring-boot-starter-test :测试模块,包括JUnit.Hamcrest.Mockito,没有的手动加上. <dependency> ...

  4. 前端项目打包工具weexpack的安装

    最下面是本人安装时候的系统环境,本篇文章只限于参考,不一定非得是这样,原因你懂得. 打包的过程中出现的问题 1.执行到weexpack run android的时候,到了resolving class ...

  5. r.js 前端项目打包

    目录结构

  6. pipeline配置前端项目

    vue pipeline { agent { label 'master'} options { timestamps() disableConcurrentBuilds() buildDiscard ...

  7. Django项目引入NPM和gulp管理前端资源

    前言 之前写了一篇<Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件>,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoSt ...

  8. 使用jenkins进行前端项目自动部署

    前面的话 后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护.一般地,前端项目使用jenkins来进行自动部署,包括打包.测试等一系列流程.本文将详细介绍j ...

  9. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十四):项目打包部署

    项目打包部署 安装MySQL镜像 注意:如果使用docker镜像安装MySQL,也需要在前端部署主机安装MySQL,因为备份还原功能是使用MySQL的本地命令进行操作的. 下载镜像 执行以下命令,拉取 ...

随机推荐

  1. log4j相对路径找不到,处理方法

    http://blog.csdn.net/u012345283/article/details/40821833?utm_source=tuicool&utm_medium=referral

  2. scala操作符&运行

    ---恢复内容开始--- #操作符运算 数学操作符 + - * / % 比较操作符 < > >= =< 逻辑操作符 && || 对等操作符 ==   != 位操 ...

  3. eclipse中的 Compiler compliance level含义

    The compiler compliance setting tells the compiler to pretend it's a different version of Java. The ...

  4. errorlevel

    ------siwuxie095 errorlevel 程序返回码 用法:echo %errorlevel% 查看当前程序返回码(即返回值),以知道程序或命令行是否执行成功. DOS在执行完后都有返回 ...

  5. [html]经验集

    禁止默认的右键菜单: window.document.oncontextmenu = function(){ return false;} WebBrowser 控件用法:(手动填充内容) // 首先 ...

  6. 2016. last day in office

    外面黑了,水面上黑魆魆的看不清楚了. 明天请假了,2017年再见! 2017加油! 2017 English improving!

  7. python集合(set)操作

    python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...

  8. intellij,eclipse,vs2013快捷键

    如何跳转到上一次编辑的位置,即如何跳到上一个光标所在的位置? intellij: Command+Alt+左方向键:上一光标的位置 Command+Alt+右方向键:下一光标的位置 定位到最后编辑位置 ...

  9. Python模块:itertools

    itertools模块:循环器 一,无穷循环器:count,cycle,repeat (1)count(5,3) #从5开始的整数循环器,每次增加3,即:5,8,11,14,17... from it ...

  10. Java 项目优化实战

    https://blog.coding.net/blog/java-coding-performance 1 Visual VM 2 优化一 2.1 背景 2.2 原实现 2.3 剖析 2.4 方案 ...