gulp入门演练
一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的
gulp安装
安装gulp 如果参数-g 表示全局安装
$ npm install gulp
$ npm install gulp --save-dev
我们先来学习压缩JS文件,新建文件目录如下

dist为解压后文件放置的目录(可自定义)
src为要解压的文件放置目录(可自定义)
gulpfile.js: gulp的配置文件,在根目录中
压缩思路1、找到要压缩的JS目录 src/app.js
2、压缩这些文件
3、把压缩好的文件放置到压缩文件目录//dist
执行步骤1、安装压缩文件的插件 gulp-uglify模块
2、cpm install gulp-uglify
3、再根目录下建立 gulpfile.js文件
gulpfile.js代码如下
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('default', function(){
gulp.src('src/app.js')//找到src下面的app.js
.pipe(uglify())//对着js进行压缩
.pipe(gulp.dest('dist/'));//把压缩的文件放置到dist文件目录下
});
配置完成:执行压缩任务
再命令行输入:gulp 或者gulp default //defaule== gulp.task('default', function()这里这个命名
在dist/js/下就能看压缩后的文件了
表达有限 如果需要交流可以加入前端开发群 425019975 一起交流学习
参考地址 gulp官网 https://github.com/gulpjs/gulp
其他参考网站 https://github.com/nimojs/gulp-book/blob/master/chapter1.md
gulp入门演练的更多相关文章
- Gulp入门教程(转载)
本人转载自: Gulp入门教程
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- Gulp入门与解惑
Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...
- gulp 入门使用
gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...
- 【转】Gulp入门基础教程
Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...
- gulp入门与一些基本设置
这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...
- 前端小白的gulp入门
gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...
- gulp入门学习教程(入门学习记录)
前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...
随机推荐
- Leetcode: Circular Array Loop
You are given an array of positive and negative integers. If a number n at an index is positive, the ...
- Leetcode: Valid Word Square
Given a sequence of words, check whether it forms a valid word square. A sequence of words forms a v ...
- java.sql.SQLSyntaxErrorException: ORA-00936: 缺失表达式。
今天遇到一个很奇怪的问题,sql报表达式错误,于是我把报错的那句sql(红色)放到数据库中执行,没有报错啊!百思不得其解! 呼!我已经提醒自己去注意看黑色的console信息了,得到了传参的参数值,但 ...
- 关于DoesObjectExist
目录: 我们可以看到这个文件夹目录是存在的 文件: 然后,我们运行测试一下: 文件存在检测成功(正常) 文件夹存在,但检测失败! ??? 明明存在的,为什么检测不到……
- Eclipse安装svn插件的几种方式
Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...
- apache2.4 windows764 python cgi
修改conf下的httpd.conf; 1:Listen和ServerName修改为相同的端口号,如8066 2:ScriptAlias就让他留在原位置,"${SRVROOT}/cgi-bi ...
- Tomcat源码导入eclipse的步骤
Tomcat源码导入eclipse 一.下载源码 1. 进入Apache 官网:http://tomcat.apache.org/ 2. 在左边侧选择要下载的源码的版本. 3. 或者直接通过Ar ...
- app加固
为什么要加固APP? 答:因为黑客通过反编译APK得到源码后,会在应用中插入代码,获取利益,比如添加广告,盗取用户账号.密码,后台定制活动等. 反编译的方法? 反编译是指apk文件通过反编译工具( ...
- 关于mysql的几个必知点
实际运用中遇到的才了解到的 导出sql文件时navicat导出的sql文件形式是一条记录一个insert语句,所以文件会比较大点,后续插入也会比较慢,而用mysqldump命令导出的sql文件会合并插 ...
- Android Bootloader LittleKernel的两篇文章 【转】
转自:http://blog.csdn.net/loongembedded/article/details/41747523 2014-12-05 14:37 3599人阅读 评论(2) 收藏 举报 ...