项目发布时,需要对项目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引用)

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

 npm install --save-dev gulp gulp-jsmin gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-copy gulp-replace
 const gulp = require('gulp'),
jsmin = require('gulp-jsmin'),
cssmin = require('gulp-minify-css'),
rename = require('gulp-rename'),
copy = require('gulp-copy'),
clean = require('gulp-clean'),
imagemin = require('gulp-imagemin'),
replace = require('gulp-replace'); // 清空文件夹
gulp.task('clean', () => {
gulp.src('dist')
.pipe(clean())
}) // js压缩
gulp.task('jsmin', () => {
gulp.src('js/*.js')
.pipe(jsmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/js'));
}); // css压缩
gulp.task('cssmin', () => {
gulp.src('css/*.css')
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/css'))
}); // 压缩图片
gulp.task('imagemin', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images/'))
}); // 复制文件
gulp.task('copy', () => {
gulp.src('lib/**/*')
.pipe(copy('dist'))
}); // 替换HTML中的js及css引用为.min引用
gulp.task('replace', () => {
gulp.src('index.html')
.pipe(replace(/js\/.*\./g, '$&min.'))
.pipe(replace(/css\/.*\./g, '$&min.'))
.pipe(gulp.dest('dist'))
}); // 部署任务
gulp.task('deploy', [
'clean',
'jsmin',
'cssmin',
'imagemin',
'copy',
'replace'
]);

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

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. 使用MLeaksFinder检测项目中的内存泄露

    github地址:https://github.com/Zepo/MLeaksFinder MLeaksFinder使用简单方便,可以帮助你在开发时发现内存泄露你的iOS应用.它可以自动发现和UIVi ...

  2. List<Object> to JSONArray一

    package com.beijxing.TestMain; import java.util.ArrayList; import java.util.List; import com.beijxin ...

  3. matlab图

    .6 统计作图 4.6.1 正整数的频率表 命令 正整数的频率表 函数 tabulate 格式 table = tabulate(X) %X为正整数构成的向量,返回3列:第1列中包含X的值第2列为这些 ...

  4. 日常维护sql

    修复mysqlcheck -u -p --repair  pmdb prefix="/export/data/mysql/bin/mysql -u -p -e" domain=机房 ...

  5. oracle 队列

    Oracle 高级队列(AQ) 适用对象:初步了解oracle高级队列人群 注意事项: 序号 注意事项 1 JMS监听部分可参考官方文档: http://docs.oracle.com/cd/e128 ...

  6. Spark RDD aggregateByKey

    aggregateByKey 这个RDD有点繁琐,整理一下使用示例,供参考 直接上代码 import org.apache.spark.rdd.RDD import org.apache.spark. ...

  7. android中的requestFocus标签

    <requestFocus />标签用于指定屏幕中的焦点View 用法:置于Views标签内部 ex: <EditText             android:id=" ...

  8. Ubuntu 试用Android L版本

    Android L是最近google一个大更新的版本,目前google开发了android L的开发者预览版本,对于一个android 开发者来说很定是要下载下来体验一把,顺便也要了解一下Androi ...

  9. PC和HOST之间文件传送

    从PC到HOST 文件传送表(*.srl) C:\123.txt text ~'LIANG.TEST.LIB.123' 批处理文件(*.bat) SEND "PC文件全路径" 'H ...

  10. linux不知道文件在哪,想查找文件内的字符串

    find . -name "*.*" |xargs grep "xxx"