Gulp安装使用教程
2016-03-14 21:06
281 查看
题记:为什么要使用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压缩,文件合并、压缩 这三个功能。
同样要保证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压缩,文件合并、压缩 这三个功能。
相关文章推荐
- 基于R语言的数据分析和挖掘方法总结——均值检验
- JSP内置对象二(response和session对象)
- Android Studio使用Git过程遇到的那些“坑”
- JavaScript高级程序设计(第三版)学习笔记20、21、23章
- hdu 1176 免费馅饼 动态规划
- Hibernate之DAO
- UML建模----时序图(Sequence diagram)
- 个人编程的真实经历!
- 线性基
- 【Stanford CNN课程笔记】6.神经网络的数据预处理
- 多进程爬虫
- ZOJ 1009 Enigma
- 数列转换
- 论background-image和img的区别
- 装饰模式
- 关于字符串匹配计数和编程思想方法
- 本博阅读指南
- 《Linux内核设计与实现》读书笔记 第二章 从内核出发
- 蓝桥杯 历届试题 7对数字 直角三角形
- C 语言基础(三)