首先需要本地已安装node环境,并且csso-cli已通过npm安装到本地目录,只要能找到就行. 1. 打开Settings配置,确认图中的 File Watchers 插件是否已存在,如果不存在,去 Plugins 仓库里进行搜索下载安装即可. 2. 选择观察项 3. 修改Program项,如果win环境变量存在node命令,那么Program改成node即可,否则Program修改为Node全路径的node.bat可执行文件(例如:C:/xxx/xxx2/node.bat), 在Argume…

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

我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.js了,可以到官网去下载,下载地址http://requirejs.org/docs/download.html#rjs .我已经做好了简单的例子放到github里面,项目里面的.git相关的文件或文件夹和readme都不用管,这些属于github的文件,地址是https://github.com/s…

这里将介绍使用PHP以一种简便的方式来压缩你的CSS文件.这种方法不需要命名你的.css文件和.php文件. 当前有许多方法需要将.css文件重命名成.php文件,然后在所有PHP文件中放置压缩代码.现在介绍这种技巧,不需要重命名CSS并且只需要一个PHP文件就能搞定. 那让我们看看是怎么实现,首先创建一个PHP文件,然后将下面的代码放到刚创建的PHP文件中. <?php // This defines the header type header("Content-type: text/…

压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件 npm install grunt-contrib-cssmin --save-dev  -------->安装css压缩插件 手动安装后,在package.json文件里,会自动将“grunt-contrib-uglify”加入,并且是当前grunt-contrib-uglify的最新版本,就如下面的…

js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩的好处: 减少 HTTP 请求次数: 节省带宽流量: js 压缩把代码混淆后可看性降低,带来一定安全性: 1. 安装Grunt Grunt 是运行在 Node.js 平台上,先要 安装 Node.js, 然后 安装 Grunt npm install -g grunt-cli 2. 使用Grunt…

引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存放我们要压缩.合并的js文件.   图片.png 3.创建package.json文件   文件.png package.json文件,包含了项目的一些信息,如项目的名称.描述.版本号.依赖包等. package.json文件中的内容如下: { "name": "grunt&qu…

问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand & short hand,请查看此文:http://www.hongkiat.com/blog/css-shorthand-longhand-notations/). 解决过程: 经过一番追查判断(搜 + 思),最终发现问题出在webpack.prod.conf.js(使用vue-cli自动搭建的w…

gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile var gulp = require('gulp'); gulpif = require('gulp-if'); sass = require('gulp-sass'); concat = require('gulp-concat'); rename = require('gulp-rename');…

转载自:http://matychen.iteye.com/blog/1477350 项目采用maven构建的时候,需要压缩js,css等,网上找了相关资料,自己综合了下-  直接放代码: <!-- js压缩 --> <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <version…

问题: 当我们版本更新的时候,我们都要清理缓存的js跟css,如何使得在网页中不需要手动清理呢? 答案: 生成带有哈希后缀的js跟css文件 1.文件路径 路径中的conf.js 是用于放置全局打包的公共方法的. conf.team.json 则是用于放置 team 这个项目的打包路径 . gulpfile.team.js 用于写 team 这个项目的打包. 打包前的文件放在build中.打包后的文件放在dist中 总的打包任务在webapp 根目录下 为什么要这样放置目录,请看 gulp分流…

gulp 压缩css 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 npm install gulp-minify-css 安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络) D:\wamp\www\BootsDataTable>npm install gulp-minify-cssnpm WARN deprecated gulp-minify-css@1.2.4: Please use gulp-cle…

一.css之上的语言 js之上的语言有jsx.tyepscript.coffescript. html之上的语言有jade. css之上的语言有sass.scss.less.stylus,这几种语言区别其实不大,完全不需要纠结到底用那个. css的缺点: 语法不够强大,不能够嵌套书写,不利于模块化开发 没有变量和逻辑上的复用机制,导致在css的属性值中只能使用字面量形式,以及不断重复书写重复的样式,导致难以维护. css预编译语言的特点: 可以使用变量:就像其他编程语言一样,免于多处修改. Sa…

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

前言 JS/CSS文件压缩我们经常会用到,可以在网上找在线压缩或者本地直接使用,我这里使用的是yahoo开源组件YUI Compressor.首先介绍一下YUI Compressor,它是一个用来压缩JS和CSS文件的工具,采用Java开发.JavaScript和CSS缩小的目标是始终保持代码的操作质量,同时减少其整体字节占用,YUI Compressor设计为100%安全的JavaScript分选程序,并且比大多数其他工具具有更高的压缩比.与JSMin相比,YUI Library 的测试节省了…

网上找了好久终于找到一个能跟VS集成使用的JS和CSS压缩工具,因为害怕忘记,所以给转发过来,顺便翻译一下,大学那会儿学的英语基本上都已经还给老师了,所以翻译的不太好,不过能看懂就成,对吧? 原文地址:http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx 一.在命令行中使用 在下载安装完成Microsoft Ajax Minifier之后,你就可以以命令的方式使用它了.单击“开始”——“所有程序”——“Microsoft Ajax Minif…

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我 插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件 等等...(其他我没用到,…

本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-plugin 在pom文件中增加该插件的定义,示例如下: <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId>…

本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-plugin 在pom文件中增加该插件的定义,示例如下: <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId>…

原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用grunt压缩已经不是什么新鲜事了,,之前的项目用的是别人给我配置好的.所以也没有去深究.这次类型不同了不需要去上传只需文件压缩.所以下午自己去研究了下grunt确实很好用. 我们这里需要对js和css单独压缩.网上很多都是合并压缩.本人觉得多个js合并之后会存在隐形问题.还是喜欢单独压缩.下面的介…

合并.压缩CSS资源文件用到了grunt-contrib-concat.grunt-css插件,自己npm就可以了,下面直接呈上package.json.Gruntfile.js代码 package.json代码如下: {   "name": "BeJS",   "version": "0.1.0",   "devDependencies": {     "grunt": "~…

需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js…

gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩js文件夹下的index.js文件输出到dist文件夹下面(注意要压缩的js文件中此处只能使用es5) var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task("uglify",function(…

profile相关知识点: 在开发项目时,设想有以下场景: 你的Maven项目存放在一个远程代码库中(比如github),该项目需要访问数据库,你有两台电脑,一台是Linux,一台是Mac OS X,你希望在两台电脑上都能做项目开发.但是,安装Linux的电脑上安装的是MySQL数据库,而Mac OS X的电脑安装的是PostgreSQL数据库.此时你需要找到一种简单的方法在两种数据库连接中进行切换,你会怎么做? 此外,你的项目需要部署.为了调试,在开发时我们在Java编译结果中加入了调试信息(…

使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加快网页响应速度?解决办法之一就是:依照Yahoo性能优化小组提出的N条性能优化建议对前端程序进行优化和重构,关于此文的讨论很多,在这里不再赘述. 这篇文章主要分享一下我个人在实际项目中,对于使用PHP对JS和CSS进行压缩的经验,在这里假设服务器仅支持GZIP压缩,不支持.htaccess(符合很多…

一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要引入到入口文件,这里我们引入到index.js中 import css from './css/index.css'; document.write("It works."); 3.在终端安装style-loader和css-loader 4.安装好后,我们开始在webpack.confi…

类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤 首先要确保pc上装有node,然后在global环境和项目文件中都install gulp npm install gulp -g   (global环境) npm install gulp --save-dev (项目环境)     在项目中install需要的gulp插件,一般只压缩的话需要 npm install gulp-minify-css gulp-con…

假设你的项目的CSS文件全部放在项目目录下名为css的文件夹中,现在将它压缩合并成一个名为main-min.css的文件,放在css-min文件夹下. (1)首先保证机器安装了node.js. (2)在项目的目录下建立名为package.json的文件,用于配置需要安装的npm包,package.json的内容如下: { "author": "evan <evan@evantahler.com>", "name": "CSS…

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

最近项目想使用在maven打包的时间压缩js,css文件,采用yuicompressor-maven-plugin插件进行压缩,但只是压缩减小大小,提高请求速度,并没有对js进行混淆.下面就写一下这个插件的使用. 假设项目包含如下结构 需要把项目中设计的css和js全部压缩,但是需要配出已经压缩过的css,js文件,不然会报错. <build> <finalName>shop</finalName> <plugins> <plugin> <…