一直想学习下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入门演练的更多相关文章

  1. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  2. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

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

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

  4. Gulp入门与解惑

    Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...

  5. gulp 入门使用

      gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...

  6. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  7. gulp入门与一些基本设置

    这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...

  8. 前端小白的gulp入门

    gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...

  9. gulp入门学习教程(入门学习记录)

    前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...

随机推荐

  1. pycharm licenseserver 注册方法

    pycharm5.0之后,以前的很多注册码都无法使用,可以选择使用license server 方式进行注册,方法如下: 注册方法:    在 注册时选择 License server ,填 http ...

  2. kali安装谷歌浏览器的方法及启动问题的解决

    在kali上安装谷歌浏览器的时候,遇到了很多问题,经过不懈努力,终于解决,现在把方法总结一下,希望对遇到同样问题的人能有一定帮助.这是给最白的小白参考的,大牛勿喷哈. 说明:我是在kali rolli ...

  3. 转载 wpf使用经验

    转载自 胡庆访[ http://zgynhqf.cnblogs.com/ ] WPF 是一个界面层框架技术,要对 WPF 技术达到熟练运用的程度,需要同时拥有开发和设计两方面的知识.而我作为一名开发人 ...

  4. 更改MyEclipse 之 jsp、js、java、xml文件字体大小设置

    1.打开eclipse->window-->prefercess--->general--->appearance-->color and font ----> B ...

  5. (四)SQL入门 数据库的操作与事务管理

    数据库的操作,有三个最基本的语句,insert插入,update修改,delete删除. 不同的数据库厂商的实现可能不同,所以就不说具体的语法怎么写的了.说语法也没有意义,到处都可以复制粘贴,记得听某 ...

  6. Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...

  7. 二十五、JDK1.5新特性---枚举

    与上篇文章介绍的相同,本文也是介绍jdk 1.5出现的新特性,本文将介绍枚举的相关用法. 在jdk 1.5 之前.Java可以有两种方式定义新类型:类和接口.对于大部分面向对象来说.这两种方法看起来似 ...

  8. iOS多线程同步锁

    在iOS中有几种方法来解决多线程访问同一个内存地址的互斥同步问题: 方法一,@synchronized(id anObject),(最简单的方法)会自动对参数对象加锁,保证临界区内的代码线程安全 @s ...

  9. python学习之网页数据获取

    由于需要学习机器学习的内容,了解到python在机器学习中使用很方便,开始学习之,机器学习目前主要在学<机器学习实战>这本书.python是在MOOC中学习<用python玩转数据& ...

  10. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...