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. [LeetCode] 443. String Compression_Easy tag:String

    Given an array of characters, compress it in-place. The length after compression must always be smal ...

  2. http 之 HTTP_X_FORWARDED_FOR

    原文   http://www.imququ.com/post/x-forwarded-for-header-in-http.html 主题 HTTP Nginx 我一直认为,对于从事 Web 前端开 ...

  3. centos 专题-各种配置应有尽有

    你想要的在这里都能得到解决: http://www.linuxidc.com/topicnews.aspx?tid=14

  4. 【upstream】Nginx配置upstream实现负载均衡

    如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...

  5. java的时间处理

    采用joda.time库 gradle,可以简化calendar的 compile "joda-time:joda-time:2.7" 例子:http://blog.csdn.ne ...

  6. IN的另类写法

    EXPLAIN SELECT * FROM `tcb_capital_log` WHERE id IN(66,79,47) EXPLAIN SELECT * FROM ( SELECT 66 AS i ...

  7. ac1008

    这题说的是 给了n个点在圆 上 然后 i连 i+2 从i+2 开始连 i+4  然后 这样一直到某个点 已经被连过为止   如果还有的没有被连过 就从那个点开始 连 按照上面的规则 当 N大于6 的时 ...

  8. 生成word附件和word域动态赋值

    生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...

  9. hue, saturation, and brightness:色调、饱和度和亮度

    色调.饱和度和亮度(hue, saturation, and brightness)以人对红.绿.蓝(RGB)三色组合的感觉为基础.在描述阴极射线管显示器参数时,经常提到这三个专有名词.所有的颜色可以 ...

  10. Ubuntu系统下使用Jenkins进行项目的自动构建还是项目回滚方法

    上面虽然实现了项目的自动部署,但是有时部署失败的时候我们需要回滚到指定版本的构建,这样才能更灵活的进行项目的构建部署.我们可以选择“参数化的构建过程”进行传递不同的参数来选择是进行新的构建还是回滚 如 ...