先要安装nodejs,初始化项目配置文件package.json,根据情况输入配置参数

npm init
 test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\temp\\test03\package.json: {
"name": "test03",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

npm init

安装gulp

npm install gulp -g   (global环境)

npm install gulp --save-dev (项目环境)

在项目中install需要的gulp插件,一般只压缩的话需要npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins/

在项目的根目录新建gulpfile.js,require需要的module

var gulp = require('gulp'),
uglify = require('gulp-uglify'); gulp.task("default",function()
{
gulp.src("src/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));
})

执行gulp命令进行js压缩

E:\temp\\test03>gulp
[::] Using gulpfile E:\temp\\test03\gulpfile.js
[::] Starting 'default'...
[::] Finished 'default' after ms

监控文件修改自动执行任务

 gulp.task("file_change",function()
{
gulp.src("src/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));
console.log("uglifyed");
}) gulp.task("auto",function()
{
gulp.watch("src/*.js",["file_change"]);
})

执行gulp auto,文件修改是自动执行压缩任务

E:\temp\\test03>gulp auto
[::] Using gulpfile E:\temp\\test03\gulpfile.js
[::] Starting 'auto'...
[::] Finished 'auto' after ms
[::] Starting 'file_change'...
uglifyed
[::] Finished 'file_change' after ms
[::] Starting 'file_change'...
uglifyed
[::] Finished 'file_change' after 4.75 ms
[::] Starting 'file_change'...
uglifyed

使用gulp压缩js详细步骤笔记的更多相关文章

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

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

  2. 使用 gulp 压缩 JS

    使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成 ...

  3. gulp 压缩js,css

    最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...

  4. gulp 压缩 js 和 css 代码

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

  5. gulp压缩js文件报错日志

    输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...

  6. gulp压缩js

    1.安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 2.查看nodejs的版本号 3.npm ...

  7. Gulp使用入门操作十一步压缩JS

    前提需要安装nodejs 一. 全局安装Gulp npm install -g gulp 二.新建一个 gulpfile.js 文件 chapter2└── gulpfile.js 三.在 gulpf ...

  8. 使用 gulp 压缩 CSS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...

  9. 使用 gulp 压缩图片

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ ...

随机推荐

  1. airflow-operator 可以管理airflow 的kuberntes 自定义controller && crd

    使用airflow-operator 我们可以让airflow 可以很方便的运行在k8s集群环境中,当前还在开发中 主要分为两部分:airflowbbase && airfowclus ...

  2. python re 正則表達式

    夜深了.敲击键盘.用CSDN整理下python   re 正則表達式是含有文本和特别字符的字符串,这些文本和特别字符描写叙述的模式能够识别各种字符串. 一下我们从实例结合理论来学习理解吧... 经常使 ...

  3. Quartz学习总结

    一.基本介绍: Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目,完全基于 Java 实现.该项目于 2009 年被 Terracotta 收购,目前是 Terraco ...

  4. linux centos 安装php的memcache扩展

    一.centos6.5 yum安装php的memcache扩展 搜索memcache yum search memcache 有了,现在可以安装了 yum -y install memcached m ...

  5. Maven install报MojoFailureException

    [ERROR] 位置: 类 com.spark.test.JavaDirectKafkaWordCount [ERROR] /I:/TrueTimeControlOnSparkByJava/src/m ...

  6. linux项目部署常用命令

    原文出处:http://blog.csdn.net/u013628152/article/details/45847013 1:执行命令#find / -name tomcat,系统将列出所有tomc ...

  7. eclipse配置maven后无法下载jar

    1.检查网络拦截是否正常 2.进入maven依赖库根目录搜索出该目录下的*lastUpdated.properties文件并删除 然后就可以继续下载jar包了

  8. php 函数func_get_args()、func_get_arg()与func_num_args()之间的比较

    在PHP的官方文档上的个自定义如下: func_get_args():返回一个包含函数参数列表的数组. func_get_arg():返回指定的参数值. func_num_args():返回调用函数的 ...

  9. ML: 降维算法-LLE

    局部线性嵌入 (Locally linear embedding)是一种非线性降维算法,它能够使降维后的数据较好地保持原有 流形结构 .LLE可以说是流形学习方法最经典的工作之一.很多后续的流形学习. ...

  10. Windows 消息【二】窗口函数

    前一篇文章讲到非队列消息会直接把消息Dispatch到窗口函数上,窗口函数长什么样? //就是一个大case分支 //要想拦截消息,override窗口函数是一个办法! procedure TCust ...