前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧。。
简介:gulp是一个前端自动化构建工具,可以实现代码的检查、压缩、合并……等等,gulp是基于Node.js的自动任务运行器
一、安装Node
去Node官网下载安装,由于5.0版本的改变比较大,下载4.2.2稳定版即可
以下操作都是在命令行环境中执行:
node -v //可查看安装Node的版本号,有即为安装成功
二、通过npm安装Gulp
npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);
npm install -g gulp //-g 是全局(global)安装,在任何目录下都可以使用
gulp -v //可查看安装gulp的版本,有即为安装成功
三、在项目中使用Gulp完成自动化构建
通过命令行进入你的项目目录,cd 命令就可以,现在我的项目根目录是 C:\gulpdemo\
注: 因为在向项目中安装gulp的时候,项目名会直接默认你的文件夹的名字命名为项目名,
所以在创建项目文件夹时命名不要使用关键字类似gulp以及模块名等。
1、初始化项目
// 当前目录:C:\gulpdemo\
npm init // 通过这个命令初始化项目,中间会要求设置几个基本设置,不需要直接回车即可
初始化之后会在项目根目录出现 package.json 文件
npm在package.json文件中管理项目的依赖项以及项目的元数据。node执行js中require的时候,也会根据package.json中的依赖项查找。
2、在项目中安装gulp以及一系列需要用到的gulp插件
npm install gulp --save-dev //--save-dev的作用是让gulp依赖进项目中,在package.json中记录起来
npm install gulp-less --save-dev //gulp-less插件,用于将less样式编译为css样式文件,相当于koala的less编译
npm install gulp-uglify --save-dev //gulp-uglify插件,用于对js文件进行压缩操作
npm install gulp-minify-css --save-dev //gulp-minify-css插件,用于对css样式进行压缩操作
npm install gulp-imagemin --save-dev //这两个插件用于图片的无损压缩
npm install imagemin-pngquant --save-dev
npm install gulp-livereload --save-dev //自动刷新页面,妈妈再也不用担心 F5 被按坏了
3、在根目录中新建 gulpfile.js 文件
以less编译插件为例:
//加载模块
var gulp = require("gulp");
var less = require("gulp-less");
//less编译
gulp.task("less", function(){
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
gulp less //进入项目根目录运行命令即可启动任务操作
项目代码放在 C:\gulpdemo\src\ 里面,代码检查压缩处理之后自动存在 C:\gulpdemo\dist\ 里作为发布代码
● 我写好的gulpfile.js文件包括上面的压缩功能,可以根据需要的功能寻找gulp插件进行拓展,要的人多就放上来,比较简单,少的话就不放了
代码地址 go go go
转载请注明: http://www.cnblogs.com/zhangmingze/p/4953704.html
前端自动化构建工具 Gulp 使用的更多相关文章
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- 前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- 前端自动化构建工具gulp使用
1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev ...
- 前端自动化构建工具gulp
1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...
随机推荐
- 转载:用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发
转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dr ...
- Codeforces 161D
树形DP: 要求找出树上距离为k的点的对数: 对于每个节点,经过这个节点的符合条件的的点有两种: 第一种:距离他为i的儿子和他爸爸中距离他爸爸为k-i-1:(不是符合的点对中的一个) 第二种:他儿子中 ...
- 【Java】数据库连接池技术
JDBC的问题 在程序中,我们经常要建立与数据库的连接,之后再关闭这个连接.我们知道,数据库连接对象的创建是比较消耗系统性能的,这些频繁的操作势必会消耗大量的系统资源.因此我们需要采用更高效的数据库访 ...
- win7 热点设置命令
netsh wlan set hostednetwork mode=allownetsh wlan set hostednetwork ssid=XXXX key=XXXnetsh wlan star ...
- Reverse Linked List 递归非递归实现
单链表反转--递归非递归实现 Java接口: ListNode reverseList(ListNode head) 非递归的实现 有2种,参考 头结点插入法 就地反转 递归的实现 1) Divide ...
- HDU 4716 A Computer Graphics Problem 2013年四川省赛题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4716 题目大意不用解释了吧,看案例就能明白 #include<cstdio> #inclu ...
- 【C++】冒泡排序、插入排序、快速排序
#include<iostream> using namespace std; void BubbleSort(int *a,int istart,int len)//冒泡排序 { //a ...
- ll 详解
长选项必须使用的参数对于短选项时也是必需使用的. -a, --all 不隐藏任何以. 开始的项目 -A, --almost-all ...
- AIX操作oracle
oracle:出现下述错误,无法连接用户. ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist ...
- [ACM] HDU 5025 Saving Tang Monk (状态压缩,BFS)
Saving Tang Monk Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...