【运用Gulp压缩文件编译文件。包括css js html image】的更多相关文章

运用Gulp压缩文件编译文件。包括css js html image

安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引入gulp组件 // 引入组件//在引入这些组件前你需要在你的项目里进行安装.举个栗子:组件中间用空格隔开.一定要先切换到你项目所在的目录 //npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-d…

WebStorm File Watchers配置将.less文件编译后的.css输出至指定目录

Arguments:其实是命令行输入“lessc file.less file.css”后者指定路径 Output Paths to refresh:刷新changed后.css文件…

Spring MVC程序中得到静态资源文件css,js,图片

转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet:  程序代码 <servlet>   …

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误…

gulp压缩css文件跟js文件

越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用gulp gulp是基于Node.js的前端构建工具 恩 确实是个好东西哦 那进入正题前先说说gulp是个啥东西吧,其实一开始我也不是很懂 百度呀 网上说是自动化工具 其实自动化工具说白了我也不是很懂 我感觉我看很抽象的概念的时候  加上自己没有那个具体的概念 就很难弄懂  有知道的小伙伴麻烦留言呀…

用gulp把less文件编译成css文件

第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-…

gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g  --- 全局安装gulp,这里我提前已经安装过了就不演示了,然后再输入命令yarn add gulp -S 局部安装,都安装完成过后输入命令 gulp -v,如果出现两个版本号,就代表都安装成功了 接着在你的项目文件夹下新建一个文件名为 gulpFile.js js文件,名字必须叫这个,官方规定的,用来写gulp…

「坐上时光机，查找编译压缩后的文件最初的样子」gulp-sourcemaps 使用说明

一般我们调试的 js/css 文件都是编译压缩后的,一旦出错很难定位原始的位置,gulp-sourcemaps 的出现帮助我们解决了这个问题. 首先我们看下目录结构: css js a.js b.js sass a.scss b.scss index.htm gulpfile.js package.json 我们的目标是 sass 文件夹中的两个文件合并压缩后,放入 css 文件夹中(命名为 main.min.css),js 文件夹中的两个文件合并压缩后,生成新的文件放在 js 文件夹中(命名为…

Gulp压缩前端CS,JS,图片文件

Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩文件就,至于Grunt,相比于Gulp太慢了,Gulp API: 假如有个本地目录,如下图: 环境: Windows,安装Node https://nodejs.org/en/ 安装Gulp: 1,全局安装,执行:npm install gulp -g 2,本地目录安装,cmd 到你的项目根目录,执…

Grunt： 拼接代码，js丑化（压缩），css压缩，html压缩，观察文件，拷贝文件，删除文件，压缩文件

准备工作 grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装 1.Grunt 安装 npm install -g grunt-cli 这是全局安装 2.在当前文件下npm init 配置package.json文件 3.安装了grunt,这个只是一个框架,里面会用很多插件,具体可以去官网查看,这里记录了8种简单的用法. 3.1 把指定的文件全部拼接变为一个文件,插件名称:grunt-contrib-concat.3.2 把js丑化也就是压缩,函数名称普遍变成a,b,c,d,e…

压缩前端文件(html, css, js)

1:原因 在写前端代码时, 因为要尽可能的适合阅读会加入许多注释, 空格等, 这些在开发时是必要的, 但当你要发布时, 就需要让代码更加精简, 精简压缩的同时也混淆了代码, 安全性也加强了, 可以说是一举两得. 2:解决方案 使用 htmlcompressor-1.5.3.jar(html) 和 yuicompressor-2.4.8.jar(js, css) 实现前端资源的压缩. 3:例子  3.1 htmlcompressor-1.5.3.jar 压缩 html文件 java -jar ./…

C#Css/Js静态文件压缩--Yui.Compressor.Net

一.Asp.Net 自带静态文件压缩工具包 Microsoft.AspNet.Web.Optimization http://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/1.1.3 但好像没有提供可直接条用的压缩方法,并且再用mvc4.0的时候,同一个网站多个域名也出现了一些问题.于是有了下面 二.使用Yahoo for .Net 的压缩工具,Nuget包名称:YUICompressor.NET Yahoo.Yui.Compr…

Node.js完整的响应html页面（包括css，js文件）

主要思想就是任何一个静态文件也应该做响应,一个获取静态文件都应当请求来处理,这是主要思想. 同时要注意两点.第一,对于不同的文件类型,比如html,css,js,请求头里面的文件类型需要根据不同的文件类型注明, 第二,文件的路径需要表达准确,fs.readFile方法的第一个参数path是已起服务的文件为根目录,这里就是以server.js文件的所在目录为根目录 文件目录 文件夹public Index.html Css文件夹 Reset.css Index.css Js文件夹 vue.min.…

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名 方案 现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件.但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案.…

开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5

前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件.外部资源文件有一些是第三方插件,有一些是自己写的业务功能脚本,项目引用这些外部文件,需要把没有压缩过的第三方插件压缩后再引用,而自己的业务功能脚本,有的做成插件形式,引用一个功能脚本,需要同时引用若干个脚本文件,因此需要把这些脚本文件合并成一个压缩文件再引用,这样可以减少HTTP请求次数,减少这些外…

webpack css文件编译、自动添加前缀、剥离

1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中 npm i style-loader -D // css文件loader npm i css-loader -D webpack.config.js的rules中添加 { test: /\.css$/, use:['style-loader', 'css-loader'] } 2.css自动添加前缀 // postcss-loader 可以给css自动添加-webkit -ms前缀…

gulp配置（编译压缩转码自动刷新注释全）

参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile.js文件 /*! * gulp * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-appen…

前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安装 全局安装 $ npm install gulp -g 进入项目跟目录,初始化 npm init , 然后安装: $ npm install gulp 安装插件 sass的编译(gulp-ruby-sass) 自动添加css前缀(gulp-autoprefixer) 压缩css(gulp-clea…

在ASP.NET中实现压缩多个文件为.zip文件，实现批量下载功能 （转载并优化处理篇）

转自:http://blog.csdn.net/yanlele424/article/details/6895986 这段时间一直在做一个网站,其中遇到了一个问题,就是在服务器端压缩多个服务器端的文件,然后在供客户下载.说白了就是用户上传了多个文件,然后别的用户可以点击批量下载这些文件.我要做的就是实现把这些文件压缩之后供用户下载.         我首先想到的是.Net提供的GZipStream类,翻了一下书才发现GZipStream没有提供加压多个文件的方法,需要自己定义,这样解压也只有使用…

gulp 压缩 js 和 css 代码

我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来,当然现在解决的办法也有很多,比如CDN 托管,缓存机制等.前端能做的还是以压缩代码为主. 现在压缩代码的工具有很多,比如webpack,但是配置起来要麻烦一些,那我采用的就是gulp来压缩代码 首先要安装依赖 npm install gulp -g //全局安装 npm install gulp…

fis入门-单文件编译之文件优化（optimize）

FIS(Front-end Integrated Solution ),是百度的前端集成解决方案.最近几天在研究前端构建的东西,就顺便了解了下,果断各种高大上,可以到FIS官网围观感受一下.如果对fis还不熟悉的童鞋,可以跑下官网的小demo体验一下. 好了,这篇文章不是fis的科普文,官方文档已经挺详细了.这里主要讲下FIS单文件编译的优化(optimize)环节. FIS单文件编译-optimize FIS详细运行原理这里不展开,有兴趣的可以看下官方文档.我们只是简单地看下单文件编译的其中一…

gulp压缩css和js

压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 sudo npm install gulp-minify-css 安装成功后,命令行显示如下内容: E:\workSpace\bulingbuling>npm install g…

使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切…

gulp压缩css

gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src 依赖安装:npm i gulp-clean-css 依赖安装:npm i gulp-dom-src gulpflie: var gulp = require("gulp"), htmlSrc = require("gulp-dom-src"),//在html页面中选取文件合并压缩 concat = require("…

Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件

前言 本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目不需要强行分离增加复杂度(如:我正在开发的博客项目) 后端渲染利于SEO,对博客网站友好 OK,虽然MVC的技术老了点,但依然可以结合现代前端工具链来提高效率 本文的食用需要先安装好Node.js环境,下载地址:https://nodejs.org/en/download 在开始前,先看看我们的项目…

C#文件或文件夹压缩和解压方法（通过ICSharpCode.SharpZipLib.dll）

我在网上收集一下文件的压缩和解压的方法,是通过ICSharpCode.SharpZipLib.dll 来实现的 一.介绍的目录 第一步:下载压缩和解压的 ICSharpCode.SharpZipLib.dll 支持库 第二步:创建一个压缩和解压的demo项目 第三步:查看压缩和解压的文件的结果 二.demo演示(包括源码和界面) 1.下载文件压缩和解压的支持库dll ,下载地址:http://pan.baidu.com/s/1pLausnL 2.创建window创建项目…

[转]嵌入式SQC文件编译

  Src Url:http://blog.csdn.net/cws1214/article/details/12996351   A.预编译部分  1.预编译DB2篇 1.1 什么是DB2预编译 在我们用C语言编写访问DB2的程序过程中,需要用到嵌入式SQL,其作用是将DB2 SQL混入一般C程序中, DB2预编译器可以将SQL语法直接转换为DB2行时服务应用程序编程接口(API)调用. 1.2 什么是bind 这是DB2 prep要做的事情,即把SQC中的SQL语句变为DB2数据库可认的AP…

Python（文件、文件夹压缩处理模块，shelve持久化模块，xml处理模块、ConfigParser文档配置模块、hashlib加密模块，subprocess系统交互模块 log模块）

OS模块 提供对操作系统进行调用的接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname")  改变当前脚本工作目录:相当于shell下cd os.curdir  返回当前目录: ('.') os.pardir  获取当前目录的父目录字符串名:('..') os.makedirs('dirname1/dirname2')    可生成多层递归目录 os.removedirs('dirname1')    若目录为空,则删…

ANT-build.xml编译文件详解

Ant 开发Ant的构建文件当开始一个新的项目时,首先应该编写Ant构建文件.构建文件定义了构建过程,并被团队开发中每个人使用.Ant构建文件默认命名为build.xml,也可以取其他的名字.只不过在运行的时候把这个命名当作参数传给Ant.构建文件可以放在任何的位置.一般做法是放在项目顶层目录中,这样可以保持项目的简洁和清晰.下面是一个典型的项目层次结构. (1) src存放文件. (2) class存放编译后的文件. (3) lib存放第三方JAR包. (4) dist存放打包,发布以后的代码…

.NET使用ICSharpCode.SharpZipLib压缩/解压文件

SharpZipLib是国外开源加压解压库,可以方便的对文件进行加压/解压 1.下载ICSharpCode.SharpZipLib.dll,并复制到bin目录下 http://www.icsharpcode.net/OpenSource/SharpZipLib/Download.aspx 2.编写工具类ZipUtil,一般放在App_Code文件夹下 using System; using System.Data; using System.Configuration; using System…