1.安装node.js

  下载地址:nodejs.org  或者  nodejs.cn

2.安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安装

   npm install gulp -g

3.安装好了以后我们建立一个test作为项目主路径,然后在cmd里cd到这个路径用npm对gulp进行依赖安装

  npm install gulp --save-dev

 安装完成后test目录如下:

  

4.插件安装-安装gulp需要用到的插件

  要使用gulp就必须使用gulp的插件,以下是我在网上搜索到的gulp插件:

  sass的编译(gulp-ruby-sass)

  自动添加css前缀(gulp-autoprefixer)

  压缩css(gulp-minify-css)

  js代码校验(gulp-jshint)

  合并js文件(gulp-concat)

  压缩js代码(gulp-uglify)

  压缩图片(gulp-imagemin)

  自动刷新页面(gulp-livereload)

  图片缓存,只有图片替换了才压缩(gulp-cache)

  更改提醒(gulp-notify)

  清除文件(del)

需要哪个装哪个就行。

  依然使用npm安装(在test文件夹下启动git或者cmd):

    npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache gulp-less del --save-dev

5.建立一个存放待压缩js的文件夹及一个放置压缩后js的文件夹(我建立的in,out)

  

6.gulpfile.js内容如下,可自己调整  

/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
//var concat = require('gulp-concat');
//css压缩
gulp.task('css', function () {
gulp.src('src/css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('des/css/'));
});
//js压缩
gulp.task('js', function () {
gulp.src(['in/*.js'])
.pipe(uglify({
// 混淆变量名
mangle: true,
// 输出时将所有的中文转换为unicode
output: {ascii_only: true}
// 将所有压缩后的代码置于des/js/文件夹
}))
.pipe(gulp.dest('out/'));
});

7.在待压缩的js文件夹,打开命令行输入:

  gulp js

 即可压缩所有js

完毕,留待日后查看或修正添加

nodejs+gulpjs压缩js代码的更多相关文章

  1. js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

    一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...

  2. 记录一个在线压缩和还原压缩js代码的工具

    packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...

  3. grunt压缩js代码

    安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grun ...

  4. YUI Compressor是如何压缩JS代码的?

    YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包 ...

  5. gulp 压缩 js 和 css 代码

    我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...

  6. 压缩和还原压缩的JS代码

    压缩JS代码:packer – 最好用的 javascript 压缩工具地址: http://dean.edwards.name/packer/ http://kan.willin.org/?page ...

  7. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  8. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  9. sublime text2之js压缩-Js Minifier

    一款基于Google Closure compiler压缩Js文件插件. 快捷键: Ctrl+Alt+M            当前文件内压缩Js代码(不推荐) Ctrl+Alt+Shift+M   ...

随机推荐

  1. (转)Elasticsearch分析聚合

    Elasticsearch不仅仅适合做全文检索,分析聚合功能也很好用.下面通过实例来学习. 一.准备数据 {"index":{ "_index": " ...

  2. Tomcat修改端口和编码配置

    1.打开Tomcat中server.xml文件,找到原本的8080,修改成没被占用的端口: 2.在这个标签里增加 URIEncoding="utf-8",修改请求的编码.

  3. (转载)【cocos2dx 3.x Lua] 注册事件函数详解

    出处: http://www.2cto.com/kf/201409/338235.html coocs2dx 版本 3.1.1 registerScriptTouchHandler 注册触屏事件 re ...

  4. Linux定时任务出现问题时正确的解决步骤

    但凡是提供服务的,都要有本账.软件服务也不例外.无论是Apache,Nginx,还是我们自己搭建的网站,日志是标配.这里的日志就是一本账. 当定时任务出现问题时,正确的处理步骤是: 1,定时任务服务是 ...

  5. numpy的ravel()和flatten()函数

    相同点: 两者所要实现的功能是一致的(将多维数组降位一维).这点从两个单词的意也可以看出来,ravel(散开,解开),flatten(变平). In [14]: x=np.array([[1,2],[ ...

  6. iOS UI基础-2.0按钮操作与形变

    按钮状态 1.normal:默认状态 Default 对应的枚举常量:UIControlStateNormal   2.highlighted(高亮状态) 按钮被按下去的时候(未松开) 对应的枚举常量 ...

  7. MySQL创建数据表并建立主外键关系

    为mysql数据表建立主外键需要注意以下几点: 需要建立主外键关系的两个表的存储引擎必须是InnoDB. 外键列和参照列必须具有相似的数据类型,即可以隐式转换的数据类型. 外键列和参照列必须创建索引, ...

  8. Django初级手册3-视图层与URL配置

    设计哲学 在Django中一个视图有指定函数和指定模版组成.对于某些特定的应用应该分成若干视图.例如博客系统 Blog主页面 详细页面入口 基于年的页面展示 基于月的页面展示 基于天的页面展示 评论行 ...

  9. wordpress 修改域名后的403

    wordpress的好处就是方便,不好呢,额,反正就是有. 最近,修改域名,也遇到了这个问题[修改域名后,出现403]. 网上的办法似乎有很多,但有一些并不好,比如修改数据库什么的,如果是新手,数据库 ...

  10. cda转MP3

    首先启动Windows Media Player播放器(依次单击“开始”——“所有程序”——“附件”——“娱乐”——“Windows Media Player”     在工具栏切换到“翻录”选项,这 ...