gulp是一个自动化的前端工具。它可以利用自身的插件来实现一些功能,如sass、less编译;浏览器自动刷新,文件压缩、重命名、代码校验(个人使用sublime的插件进行校验)等功能。当然这些功能也可以通过其他手段来实现,但是gulp实现的功能比较全面、快速、而且具有选择性(每个人都可以利用它来实现自己需要的功能)。

1.gulp安装

  1)首先安装node环境

  2)node全局安装gulp(npm install -g gulp),如果安装不上可使用淘宝镜像(cnpm install -g gulp)

2.gulp插件的使用

  安装好gulp之后现在就需要使用gulp实现一些功能。

  例如:实现js压缩并重命名

  1)命令行切换到工程目录下,在工程目录下安装gulp(cnpm install gulp --save-dev)

  2)在工程目录下安装gulp-uglify(压缩js的插件)和gulp-rename(文件重命名插件)。

  3)然后在项目的根目录下新建文件gulpfile.js。

  4)在gulpfile.js中的代码如下:

 //引入gulp 、gulp-rename、gulp-uglify
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
//定义任务名称‘uglify’
gulp.task('uglify',function(){
//选择文件路径
gulp.src('script/angular/angular-1.4.6.js')
//使用uglify压缩
.pipe(uglify())
//对文件进行重命名
.pipe(rename('angular-1.4.6.min.js'))
//文件的输出路径
.pipe(gulp.dest('script/angular'))
});

  5)在命令行中执行guip uglify

3.gulp常用的api

  1)gulp.task() 定义一个gulp任务

  2)gulp.src() 定义文件的路径

  3)gulp.dest() 定义文件的输出路径

  4)gulp.watch()对文件进行监听

4)个人常用的gulp插件(后面依次介绍)

  1)sass编译(也可以实现less编译,只是使用的插件不同)

  2)自动添加浏览器前缀(如-webkit、 -ms、-moz、-o 等),貌似根据caniuse的数据来进行浏览器前缀的添加。

  3)html、css、js文件的压缩、合并重名等

  4)浏览器的自动刷新

等等。。

前端自动构建工具@gulp入门的更多相关文章

  1. 前端自动构建工具Gulp入门

    基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt ...

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

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

  3. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  4. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  5. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  6. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  7. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  8. 自动构建工具Gulp

    摘要:  gulp与grunt一样,都是自动构建工具.和grunt相比它更突出一个流的概念,任务是一个接一个执行的.今天就分享如何用gulp做自动化. 安装: gulp也是基于node环境,所以安装g ...

  9. 前端自动化构建工具-gulp

    gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...

随机推荐

  1. git 撤销commit

    如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d86c5 ...

  2. Android 打包

    1.数字签名(指的是我们打包程序时所用keystore的SHA1指纹) 2.debug打包,不能在android 市场上架,使用的签名是默认的签名,1年后失效:release打包使用的是自己的签名,可 ...

  3. js点击打开一个固定宽高的网页

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Hbase资料汇总

    1.hbase api http://blog.csdn.net/u010967382/article/details/37878701

  5. Java程序员必须知道的10个调试技巧

    调试可以帮助识别和解决应用程序缺陷,在本文中,将使用大家常用的的开发工具Eclipse来调试Java应用程序. 但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运 ...

  6. MC的内存管理和删除机制

    先看一下,什么叫做内存的碎片化: 如果用c语言直接 malloc,free 来向操作系统申请和释放内存时, 在不断的申请和释放过程中,形成了一些很小的内存片断,无法再利用. 这种空闲,但无法利用内存的 ...

  7. Exynos 4412 Uboot源码解析

    原文地址:http://www.cnblogs.com/jacklu/p/6226330.html Exynos 4412 Uboot的汇编代码就不贴了,没有的可以私信我. 这是我当时阅读代码时的思维 ...

  8. 用vs2013(cpu-only)调试caffe的mnist

    在调试Mnist例子之前,首先需要用vs2013编译好caffe.详情请参见: [caffe-Windows]caffe+VS2013+Windows无GPU快速配置教程 按照上述教程编译好caffe ...

  9. HTTP权威指南笔记-1.概述

    1.1 通讯 Web内容是存储在服务器上的,Web服务所使用的是HTTP协议,所以经常称为HTTP服务器.通讯过程为客户端(正常我们所使用的)发出请求,服务端根据客户端的HTTP请求响应相应数据,这就 ...

  10. GPL 和BSD和Apache

    开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别<ignore_js_op> 以下是上述协议的简单介绍:BSD开源协议BSD开源协议是一个给于使用者很大自由的 ...