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. 图文解析Spark2.0核心技术(转载)

    导语 Spark2.0于2016-07-27正式发布,伴随着更简单.更快速.更智慧的新特性,spark 已经逐步替代 hadoop 在大数据中的地位,成为大数据处理的主流标准.本文主要以代码和绘图的方 ...

  2. R之ddlpy函数学习[转载]

    转自:https://www.cnblogs.com/aloiswei/p/6032513.html 1.函数 ddply(.data, .variables, .fun = NULL, ..., . ...

  3. PAT 1019 General Palindromic Number[简单]

    1019 General Palindromic Number (20)(20 分) A number that will be the same when it is written forward ...

  4. 使用tagName定位报错

    使用标签进行定位元素,页面报错,由于input标签不唯一,webdriver默认会取第一个元素,但是第一个input元素的类型是‘hidden’,无法展示,因此程序就报错了 如何解决,未完待续...

  5. WebService之Axis2(1):用POJO实现0配置的WebService

    Axis2是一套崭新的WebService引擎,该版本是对Axis1.x重新设计的产物.Axis2不仅支持SOAP1.1和SOAP1.2,还集成了非常流行的REST WebService,同时还支持S ...

  6. 使用Fiddler远程抓包

    Fiddler简介以及web抓包 一.Fiddler简介 简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯.网上简介很多,我们不多说. 二 ...

  7. Python线程,进程,携程,I/O同步,异步

    只有本人能看懂的-Python线程,进程,携程,I/O同步,异步 举个栗子: 我想get三个url,先用普通的for循环 import requests from multiprocessing im ...

  8. linux常用命令:rpm 命令

    rpm是一个功能十分强大的软件包管理系统. 1.命令格式: rpm  [参数]  [包名] 2.命令功能: 使得在Linux下安装.升级和删除软件包的工作变得容易,并且具有查询.验证软件包的功能.与图 ...

  9. linux下删除大量文件提示参数过长解决办法

    linux下删除大量文件提示参数过长解决办法:在当前目录下rm -rf * 在linux中删除大量文件时,直接用rm会出现:-bash: /bin/rm: 参数列表过长的错误. 这时可以用find命令 ...

  10. B轮公司技术问题列表

    B轮公司技术问题列表 1.异构系统的接口对接我们有自己的一套统一接口,但是需要与其它公司的接口做对接,但是各个公司的接口各不相同,有什么好的方式能够方便与各公司的接口做对接的同时我们这边也能尽量少或者 ...