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. Fortran入门:Windows平台的Fortran编译器安装和使用

    因为课程需要,今年开始学习FORTRAN语言.之前学校的计算概论用的是C,后来又学了C++和Python作为面向对象的工具,数值计算方面主要通过学校的许可证用的MATLAB.因为专业侧重数值模拟和反演 ...

  2. SQL工具类

    package com.ebizwindow.crm.utils; import java.util.List; import com.ebizwindow.crm.constants.SqlCons ...

  3. Perl的子程序(二)

    在Perl中可以自己创建子程序(Subroutine): 关键字sub,子程序名以及用花括号封闭起来的代码块. sub  marine { ... } 子程序名与标量的命名空间是不同的两个部分. 子程 ...

  4. Geometry

    uva1473 这题说的是 在空间中给了n个点 然后用体积最小的圆锥将这些点包含在内可以在表面上, 将这些点 映射到xoz平面上然后,然后枚举每个上凸包的边和每个点的极值进行判断求得最小的体积 我们会 ...

  5. linux常用命令:iconv 命令

    iconv命令是linux下用于文件转编码的常用命令,对于同时使用windows系统和linux系统的同学来说文件转编码也是经常遇到的操作. 1.命令格式: iconv [选项...] [文件...] ...

  6. MyEclipse 相关设置

    1. MyElipse复制项目后,修改项目的发布名称的方式.右击你的项目,选择 properties -- > MyElipse -- > web,然后修改名称即可. 2. IDE查看源代 ...

  7. 学习Linux的正确姿势

    学习Linux的正确姿势 端正学习态度1.Linux不等于骇客(or Cracker).当然众所周知很多“黑客工具”都是Linux平台上的,我帮助过很多Linux小白发现他们殊途同归都是朝着类似Air ...

  8. oracle用户名和密码到期后如何处理

    原因:确定是由于Oracle11g中默认在default概要文件中设置了“PASSWORD_LIFE_TIME=180天”所导致. 影响: 1.密码过期后,业务进程连接数据库异常,影响业务使用. 2. ...

  9. pyDay6

    内容来自廖雪峰的官方网站 1.在Python中,代码不是越多越好,而是越少越好.代码不是越复杂越好,而是越简单越好,1行代码能实现的功能,决不写5行代码.请始终牢记,代码越少,开发效率越高. 2.取指 ...

  10. Python Web学习笔记之TCP的3次握手与4次挥手过程

    前言 尽管TCP和UDP都使用相同的网络层(IP),TCP却向应用层提供与UDP完全不同的服务.TCP提供一种面向连接的.可靠的字节流服务. 面向连接意味着两个使用TCP的应用(通常是一个客户和一个服 ...