题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录。
同样要保证nodejs的安装。
一、 执行gulp的安装命令,跟其他插件一样,也存在全局安装或者项目内安装的区别

二、 Gulp跟grunt的功能是一致的。压缩js、css、html、图片,合并文件等功能
这一步是安装所需要的对应的插件
PS:
gulp plugins,用来寻找相应的gulp组件
gulp-uglify,用于压缩js,从命名可以看出(跟grunt压缩js命名差不多)
gulp-minify-css、gulp-imagemin、gulp-htmlmin,压缩样式、图片、html
gulp-ruby-sass,支持sass
glulp-jshint,检查js是否有问题
gulp-concat,合并文件
gulp-rename,文件重命名
gulp-clean,清空文件夹
gulp-livereload,控制客户端同步刷新,这个命令没有用过,以后仔细使用一下

三、 根目录下创建package.json(nodejs的项目一般都会这样,给你一个package.json文件,然后初始化该项目)执行命令npm init

在package.json中就会生成对应的项目初始化信息

四、 Dos下找到项目目录,执行在项目中的gulp安装

五、 新建gulpfile.js文件,并且写入如下内容

六、执行gulp

这样,gulp就算是执行了,只不过我们执行的是个空的,下面我们会举例介绍如何压缩js、css、html图片以及检查js、合并文件
七、向gulpfile.js中写入如下内容,同时要保证已经存在需要的文件,test.js等
代码的写法跟nodejs的写法一致

注意,图片压缩不成功,js检查也不成功,不确定是插件问题,还是书写问题
所以这里最好只关注css压缩,文件合并、压缩 这三个功能。

Gulp安装使用教程的更多相关文章

  1. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  2. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  3. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

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

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

  5. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  6. 前端自动化构建工具——gulp环境搭建教程

    gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...

  7. IntelliJ IDEA - 热部署插件JRebel 安装使用教程

    IntelliJ IDEA - JRebel 安装使用教程 JRebel 能做什么? JRebel 是一款热部署插件.当你的 Java-web 项目在 tomcat 中 run/debug 的时候 , ...

  8. Zabbix3.x安装图解教程

    准备知识: Zabbix3.x比较之前的2.0界面有了很大的变化,但是安装部署过程与2.x基本完全一样. 1.Zabbix2.x安装图解教程 http://www.osyunwei.com/archi ...

  9. Gulp安装及配合组件构建前端开发一体化

    原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...

随机推荐

  1. MongoDB学习(翻译3)

    支持的where字句(比较多,今天先写一部分) 本节介绍支持的where字句 正如前面提到的,不是所有的C#表达式都支持where子句.您可以以此文为指导,或者你可以尝试表达,看看它是否工作(如果不支 ...

  2. hibernate查询出的数据和数据库不一致

    之前直接使用hibernate的时候就出现过已经进行物理存储后的数据,查询不出来的情况,既然是已经存储后的数据,说明事务已经提交,想必问题出在查询时,查询的缓存,没有查询数据库.时有时无就很奇怪. 现 ...

  3. 【Linux】Shell学习笔记之四——文件和目录管理(硬连接和软连接)

    在这节将要学习linux的连接档,在之前用"ls -l" 查看文件属性的命令时, 其中第二个属性是连接数.那么这个连接数是干什么的?这就要理解inode. 先说一下文件是怎么存储的 ...

  4. jsp传值乱码解决办法

    在jsp中,我们经常从数据库读取数据返回客户端,但我们常常在制作时出现乱码现象,所以我们可以用<%request.setCharacterEncoding("UTF-8"); ...

  5. 通告机制Notification

    Obj-c的基本通讯原则是对象间的消息传递,这种情况多出现在两个对象之间.但是如果多个对象共同关注一个对象状态的时候呢,当然可以让发生事件的对象向所有关注他的对象发送消息,但是这并不高效.所以有了通告 ...

  6. linux 下把Caps_Lock 映射成Ctrl

    我用的是debian 7,以前是gnome桌面,系统里就有改变键盘布局的设置.之前gnome 崩了一次,就换成了openbox ,稍微配置了一下也可以很好使用. 可以参考这篇文章 5分钟openbox ...

  7. js手机号批量滚动抽奖代码实现

    我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...

  8. Html+Css实现九大行星动画效果

    前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了, 今年神舟十一号载人飞船顺利发射成功,中国航天 ...

  9. 读书笔记:《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  10. <span>什么意思

    <span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果. <span> 本身没有 ...