//自定义任务 module.exports = function (grunt) { // 项目配置 var http = require('http'); var qs = require('querystring'); var fs=require("fs"); function write(name,temp){ fs.writeFile("./release/"+name,temp,"utf8",function(err){ if(er…
压缩前的工程目录: 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压缩.混淆和加密的问题,特意找了些资料看了下,现在总结一下: 1.关于三者的定义与区别 压缩:删除 Javascript 代码中所有注释.跳格符号.换行符号及无用的空格,从而压缩 JS 文件大小,优化页面加载速度. 混淆:经过编码将变量和函数原命名改为毫无意义的命名(如function(a,b,c,e,g)等),以防止他人窥视和窃取 Javascript 源代码,也有一定压缩效果. 加密:一般用eval方法加密,效果与混淆相似,也做到了压缩的效果. 从定义中可以看出,压…
当新增一个module时,有时会引用自定义的或者第三方CSS.JS文件. 1.添加自定义的CSS时,可以直接在module的根目录下添加module.css,然后框架会自动加载此CSS: 2.这个比较灵活方便.首先在需要引用CSS或者JS文件的用户页面.ascx文件头添加 <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembl…
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ruby/安装sass ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath      …
一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动化的管理子任务的运行: 3.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等 2)使用原因: 1.合并js文件——为了明确模块分工,可能会将Javascript代码拆成很小很小的一个个js文件,为减少Http Request我们需要合并js文件 2.压缩js文件.css文件等…
自定义一个Utils.js文件,在其中写js代码即可.如: (function(w){ function Utils(){} Utils.prototype.getChilds = function(_selector){}; Utils.prototype.getNextSibling = function(_selector){}; Utils.prototype.getPrevSibling = function(_selector){}; Utils.prototype.validate…
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.js文件 Ext.define('js.extjs.ux.MyWindow'/*名称一定要与路径相对应*/,{ extend : 'Ext.window.Window', title : '动态加载的组件', width : 400, height : 300, bodyStyle: 'backgro…
参考: 博客园:js压缩.混淆和加密 知乎:前端如何给 JavaScript 加密(不是混淆)?  (阿里聚安全有回答问题) 站长工具  (在线JS压缩加密工具) Obfuscator (在家JS压缩加密工具,也有win下的客户端下载) uglifyjs   (压缩混淆工具 ) 压缩 删除 Javascript 代码中所有注释.跳格符号.换行符号及无用的空格,从而压缩 JS 文件大小,优化页面加载速度. 混淆 经过编码将变量和函数原命名改为毫无意义的命名(如function(a,b,c,e,g)…
md5.js /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002. * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet * Di…
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩的好处: 减少 HTTP 请求次数: 节省带宽流量: js 压缩把代码混淆后可看性降低,带来一定安全性: 1. 安装Grunt Grunt 是运行在 Node.js 平台上,先要 安装 Node.js, 然后 安装 Grunt npm install -g grunt-cli 2. 使用Grunt…
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.htmlpackage配置文件 http://blog.csdn.net/woxueliuyun/arti…
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表 示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的 东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是…
grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://nodejs.org/可以选择下载合适的node版本. 安装nodejs成功后进行grunt安装.(示例为windows版本nodejs) nodejs 0.6版本以上自动安装了npm包管理工具,如果你的nodejs版本在0.6以下请下载安装npm包管理器. 安装npm成功后,安装 grunt-cli  (…
uglifyjs可以用来压缩混淆js文件,发布release版本应用利器.在StackOverflow浏览了一下,相比Google Closure和YUI compressor,uglifyjs被推荐的更多一点,YUI已经不再更新且部分作者也加入uglifyjs开发了. 1. 安装 安装可以通过npm安装. 下载node.js安装文件:http://nodejs.org/download/ npm包含在node.js中. 安装uglifyjs: -g @2的作用是指定下载uglify-js 2.…
在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找,文章内容非常浅显. 一. 什么是grunt JavaScript世界的构建工具,官网上是这么描述的,姑且这么描述,个人感觉还比较好用.官网地址: http://www.gruntjs.net/  更多的参考资料也可以查询官网 二. 安装grunt Grunt和Grunt插件是通过npm安装并管理的,…
最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr…
grunt concat针对有依赖文件的js脚本的合并: 在一个入口文件index.js里,有很多依赖文件,主要分两类,一类是和主文件同目录,另一类是其他目录下的js(cmd.非cmd的js文件,一般会在config中使用alias进行路径配置),而在concat时,默认会将主文件中的第一类的依赖文件和主文件进行合并. define(function(require,exports,module){ require("CommonAPI"); require("commFun…
自定义dateFormat.js文件模块 dateFormat.js /** * 时间字符串 转 时间戳 * @param {String} time_str 时间字符串(格式"2014-07-10 10:21:12") * @returns {Number} 10位数的时间戳(秒值:1404958872000) */ const toTimestamp = time_str => +new Date(time_str) / 1000 /** * 时间戳 转 时间字符串 * @p…
用script标签,src是js文件路径 <script type="text/javascript" src="./js/udc.js"></script> 如果项目中用到了jquery,同样src是jquery文件路径 <script type="text/javascript" src="./lib/jquery-1.12.4.min.js"></script> 如果项目中…
源代码及样例下载地址: http://download.csdn.net/detail/u014569459/7169385 一.功能说明: 1. 支持语言国际化 2. 支持图片文件.JS文件国际化 二.使用说明: 1. 将jm_localization.jar(JDK 1.6编译)文件拷贝到WEB-INF目录下lib目录下 2. 将localization.tld文件拷贝到WEB-INF目录下tld目录下 3. 页面头部要包含 <%@ taglib uri="/WEB-INF/tld/l…
这里的内容, 提前要知道  import comm from ‘...’  和 import {  comm }  from ‘...’ 的基础知识. 我举个案例, 当你有很多api文件的时候, 比如, login.js   user.js , 你使用的时候,每次都要引用. import {  login  }  from  ‘@/api/login.js’    , user文件亦是如此.  所以, 我想着, 把它集成到一个common.js 文件中, 进行操作. 因此有了如下的代码: 2.1…
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页面大文件,各自页面合并生成自己所需js的大文件. 3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件. 另外在我看来,合并有两个目的: 1. 为了减少请求数. 2. 代码安全考虑(文件分得越多,越容易被人看清). PS:注意我说的不是压缩混淆,只是合并 1. 一…
需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控制?我们是这样控制的,代码如下: <script src="${resource}/js/base/require.js" data-main="${resource}/js/accountMain"></script> 这个${resource…
时间:2018-03-06 18:23  事件:配置 gruntfile.js文件 首先,回忆一下之前的点,grunt项目下面必须有两个文件  ,第一个  package.json ,第二个  Gruntfile.js.其中,package.json文件中可以列举一些需要用的grunt插件(说明:https://docs.npmjs.com/files/package.json). cmd窗口进入grunt项目目录,最好自己先弄一份package文件,不要用系统自己生成的,列举出需要的 grun…
我已经从事过好多年的SPA开发工作,我发现很多的程序猿都从来不往 bundle.js 文件的体积上动脑筋,这让我有点懵逼. “安心洗路,等俺把代码混淆压缩后就一切666了”,若是有人这么说,我会翻白眼. 其实当我们压缩 bundle.js 的时候,我们可能会凭空折腾出一个庞大的应用,导致其加载时间抑或在移动端的连接时间变慢.那么问题就来了——我们是否有办法给 bundle 显著地瘦瘦身? 其实一切都很简单——使用相对文件路径即可.我们来俩个示例看看它们的区别. 示例1 首先,我们使用ES6的解构…
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text/javascript" defer>,defer属性可以推迟对脚本的解释,直到文档已经显示给用户为止,但只有IE支持defer属性 (2)设置具体的延迟时间,对应的js代码如下: function loadScript(){ var myScript=document.createEleme…
现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档可以参考.但是只看文档是不是觉得很蛋疼呢?一个字:看不太懂啊! 好了,废话不多说,直接发安装步骤和注意事项,都是心酸研究出来的啊... 这里介绍mac的安装方法.windows方法相类似,等我稍微研究一下后再发上来 首先,要安装nodejs,grunt是依赖node滴.上 www.nodejs.or…
写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一. 本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理. CSS 和 JS 合并工具的发展 对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段. 网站刚刚搭建的时候,…
为什么要合并.压缩你的JS文件?        一个项目开发完成我们总能发现有一堆js文件非常混乱.           一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加载进来的CSS.JS.图片等文件,指定为异步加载的文件除外. 每读取一个文件,浏览器都会向Web服务器发送一个加载的请求,服务器觉得这个请求没问题后,浏览器才会开始接收文件.也就是说,每次加载一个文件都会消 耗一定的时间在服务器和客户端的来回上.          加载一个文件消耗的时间可以忽略不计…