gulp入门随笔

由于我所在的项目组一直在用gulp构建工具,而我只是在前人搭好的环境下每次运行gulp packJs来打包js,对里面的东西全然不知,刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中,这样也会对这个构建工具有一些深刻的理解。

首先,gulp是什么?gulp是基于nodejs的自动任务运行器,能自动地完成html js css sass image等文件的的检查、合并、压缩、浏览器自动刷新、部署文件生成,在实现上,借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,输入输出是基于流式的。gulp不需要复杂的配置文件(所以构建脚本是代码而不是配置文件),都是使用标准库(node.js standard library)来编写脚本;插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;任务都以最大的并发数来执行。

其次,安装和使用,网上有好多安装教程这里就简单说下。第一,node是环境需要,所以应首先安装;第二,全局安装gulp(npm install -g gulp)再在项目下局部安装gulp(npm install -save--dev gulp);第三,在项目目录下面新建基于nodejs不可少的package.json(也可以用命令行npm init)和gulp的配置文件gulpfile.js。然后需要什么插件安装后在gulpfile.js里面require一下操作就行。

最后,说说gulp最常用的api函数(下面只写一个大概,具体还需亲自去看api文档):

① gulp.task(name[, deps], fn):name是任务名称,deps是可选的数组(该任务依赖的任务),fn是调用插件操作;

② gulp.src(globs[, options]):指明处理的源文件路径,options是可选的,返回当前流至可用插件。

③ gulp.dest(path[, options]):指明处理后的输出路径;

④ gulp.watch(glob[, options], tasks) / gulp.watch(glob[, options, cb]):监视文件的变化并运行相应的任务。

最后最后再说一个自己搭建过程中遇到的一个小问题,就是用http-server和livereload在我的电脑上始终没起作用,后来换了一种方式改用gulp-connect就可以实现浏览器自动刷新了。后来还试了一下基本的js css压缩插件 也都没有问题,以后再慢慢深入吧。总体感觉gulp还是挺简洁使用的。

时间: 2024-11-05 21:54:14

gulp入门随笔的相关文章

【转】Gulp入门基础教程

Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端 代码的编译(sass.less).压缩.测试:图片的压缩:浏览器自动刷新,还有许多 强大的插件可以在这里查找.比起Grunt不仅配置简单而且更容易阅读和维护,我们 可以做一个对比: Grunt: sass: { dist

Caffe入门随笔

Caffe入门随笔 分享一下自己入门机器学习的一些资料:(1)课程,最推荐Coursera上的Andrew NG的Machine Learning,最好注册课程,然后跟下来.其次是华盛顿大学的Machine Learning系列课程,一共有6门,包括毕业设计(2)书籍: 机器学习(周志华西瓜书).机器学习实战.统计学习方法(李航).集体智慧编程.数学之美(吴军)(3)微博@余凯_西二旗民工:@老师木:@梁斌penny:@张栋_机器学习:@邓侃:@大数据皮东:@djvu9:@陈天奇怪(4)知乎@贾

WCF入门随笔 (一). 新建一个WCF服务

1. 新建服务 (1). [文件]--[新建项目]--[WCF服务应用程序] (2). 将默认生成的IService1.cs和Service1.svc文件删除掉 (3). 添加自定义的WCF[服务文件]Math.svc,此时vs2012会自动生成WCF接口文件IMath.cs,我们在IMath中定义WCF方法Add,在Math.svc.cs对该接口的方法进行实现. IMath.cs文件 1 namespace WCFService 2 { 3 [ServiceContract] 4 public

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

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,

gulp入门

入门 http://www.tuicool.com/articles/FJVNZf 1.全局安装 sudo npm install -g gulp 以下需要进入项目目录: 2.项目安装 如果项目需要其他nodejs其它包,请先创建package.json,只用gulp,可以直接使用下面命令 cnpm install --save-dev gulp 3.安装gulp组件 例如: npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gu

gulp 入门使用指南(未完)

其实网上有一大把入门指南了,官网上也讲得很清楚.怎么安装,有哪些方法,我在网上已经看到很多很多很多了. 可是我还是很懵逼.不能理解为什么要使用这些工具,不知道学习了这些方法该怎么用,在哪里用.光看文档是学不会的,得有实战!实战啊!我感受不到这些新技术的好处.所以最初学习的时候,我迫切地渴望能有一个人,一篇文章,能通过一个具体的项目来指引一下我.然鹅并没有.(在小公司的坏处,没有指导,突破不了,还懒) 现在我对gulp也还是懵懵哒.只能慢慢写咯. 几乎每一个前端工具都对应了它自己的配置文件,nod

前端构建工具gulp入门教程

新建Gulpfile文件,运行gulp 安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务. 检查Javascript 编译Sass(或Less之类的)文件 合并Javascript 压缩并重命名合并后的Javascript 安装依赖 npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 新建gulpfile文件 现在,组件都安装完毕,我们需要新建

gulp入门教程

gulp是什么? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤

gulp入门学习

一.gulp简介 gulp是一个自动化构建工具.在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率. 二.安装gulp 在安装gulp之前先要确认已经正确安装了node.js,然后在项目根目录下安装gulp: $ npm install gulp 三.gulp函数接口介绍 在编写gulp配置文件gulpfile之前,需要先了解常见的函数接口: 1. gulp.src() gulp的工作过程是这样的,首先通过gulp.src()获取我们想要处理的文件的stream(文件流):然后