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. poj3468A Simple Problem with Integers(线段树的区域更新)

    http://poj.org/problem?id=3468 真心觉得这题坑死我了,一直错,怎么改也没戏,最后tjj把q[rt].lz改成了long long 就对了,真心坑啊. 线段树的区域更新. ...

  2. OCR学习及tesseract的一些测试

    最近接触OCR,先收集一些资料,包括成熟软件.SDK.流行算法. 1. 一个对现有OCR软件及SDK的总结,比较全面,包括支持平台.编程语言.支持字体语言.输出格式.相关链接等 http://en.w ...

  3. win10 + cuda(v9.0) 安装TensorFlow-gpu版

    之前在实习公司的电脑上装过TensorFlow-gpu,那时候很快就装好了.但在自己的笔记本上装时,却搞了很久... 一部分原因是因为用校园网下载cuda toolkit 和cudnn ,总是在最后时 ...

  4. recv函数返回值说明

    recv函数 int recv( SOCKET s, char FAR *buf, int len, int flags); 不论是客户还是服务器应用程序都用recv函数从TCP连接的另一端接收数据. ...

  5. Lintcode: Heapify && Summary: Heap

    Given an integer array, heapify it into a min-heap array. For a heap array A, A[0] is the root of he ...

  6. SP Flash Tool New Version v5.1352.01

    Friends, Sp Tool updated to new version with whole new revamped interface New SP Flash Tool 3.1352.0 ...

  7. kendo grid应用经验总结

    学习网址 https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/overview https://demos.telerik. ...

  8. 浅谈EM算法的两个理解角度

    http://blog.csdn.net/xmu_jupiter/article/details/50936177 最近在写毕业论文,由于EM算法在我的研究方向中经常用到,所以把相关的资料又拿出来看了 ...

  9. c# 模拟get请求例子,演示Session会话状态。

    创建一个控制台 程序: using System; using System.Collections.Generic; using System.IO; using System.IO.Compres ...

  10. linux常用命令:Linux 文件类型与扩展名

    Linux文件类型和Linux文件的文件名所代表的意义是两个不同的概念.我们通过一般应用程序而创建的比如file.txt.file.tar.gz ,这些文件虽然要用不同的程序来打开,但放在Linux文 ...