Gulp安装使用教程
题记:为什么要使用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安装使用教程的更多相关文章
- windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)
以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- 【转】Gulp入门基础教程
Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...
- gulp的使用以及Gulp新手入门教程
Gulp新手入门教程 原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...
- 前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
- IntelliJ IDEA - 热部署插件JRebel 安装使用教程
IntelliJ IDEA - JRebel 安装使用教程 JRebel 能做什么? JRebel 是一款热部署插件.当你的 Java-web 项目在 tomcat 中 run/debug 的时候 , ...
- Zabbix3.x安装图解教程
准备知识: Zabbix3.x比较之前的2.0界面有了很大的变化,但是安装部署过程与2.x基本完全一样. 1.Zabbix2.x安装图解教程 http://www.osyunwei.com/archi ...
- Gulp安装及配合组件构建前端开发一体化
原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...
随机推荐
- IOS Objective-C 协议,委托
IOS Objective-C 协议,委托 IOS开发使用的语言Objective-C(以下简称OBJ-C)是一种扩展自C语言的面向对象语言.在OBJ-C中有一个很重要概念:消息.在最近的学习当中逐渐 ...
- Go - Revel框架介绍
Go - Revel框架介绍 https://github.com/robfig/revel http://robfig.github.io/revel/ web框架:revel 数据库:mongod ...
- Design Patterns in Smalltalk MVC 在Smalltalk的MVC设计模式
Design Patterns in Smalltalk MVC在Smalltalk的MVC设计模式 The Model/View/Controller (MVC) triad ofclasse ...
- Trade-----HDU3401----单调队列优化的DP
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=3401 题目意思: 有T天,你每天可以以API买进,BPI卖出,最多买ASI个,最多卖BSI个 最多只能 ...
- 写一些脚本的心得总结系列第4篇-------从数据库同步到redis
5.从数据库同步到redis的. redis把数据放内存里,读取都非常方便,也提供了远超memcache的丰富数据结构.下面我举2个例子,比如1)把数据从数据库写入到redis: <?php $ ...
- SPL學習之SplDoublyLinkedList
Standard PHP Library(SPL)是官方提供的标准库,从php5.0.0开始已经默认实现在php中,我们可以类比它为ruby中的gem安装的包.spl里面实现了许多迭代器和数据结构对象 ...
- Facebook开源的基于SQL的操作系统检测和监控框架:osquery daemon详解
osqueryd osqueryd(osquery daemon)是可以定期执行SQL查询和记录系统状态改变的驻守程序. osqueryd能够根据配置手机归档查询结果,并产生日志. 同时也可以使用系统 ...
- 关于javascript变量作用域的研究。
开始 一个变量的作用域(scope)是程序源代码中定义这个变量的区域.全局变量具有全局作用域,在javascript中的任何地方都是有定义的.然而在函数内申明的变量只在函数体内有定义.他们是局部变量, ...
- 你真的懂javascript中的 “this” 吗?
一.前言: 我们知道 "this" 是javascript语言的一个关键字,在编写javascript代码的时候,经常会见到或者用到它. 但是,有一部分开发朋友,对 "t ...
- 浅谈linux读写同步机制RCU
RCU是linux系统的一种读写同步机制,说到底他也是一种内核同步的手段,本问就RCU概率和实现机制,给出笔者的理解. [RCU概率] 我们先看下内核文档中对RCU的定义: RCU is a sync ...