前端构建工具gulp入门教程
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。
第一步:安装Node
首先,最基本也最重要的是,我们需要搭建node环境。访问http://nodejs.org,然后点击大大的绿色的install
按钮,下载完成后直接运行程序,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。
第二步:使用命令行
也许现在你还不是很了解什么是命令行——OSX中的终端(Terminal),windows中的命令提示符(Command Prompt),但很快你就会知道。它看起来没那么简单,但一旦掌握了它的窍门,就可以很方便的执行很多命令行程序,比如Sass,Yeoman和Git 等,这些都是非常有用的工具。
如果你很熟悉命令行,直接跳到步骤四。
为了确保Node已经正确安装,我们执行几个简单的命令。
node -v
回车(Enter),如果正确安装的话,你会看到所安装的Node的版本号,接下来看看npm。
npm -v
这同样能得到npm的版本号。
如果这两行命令没有得到返回,可能node就没有安装正确,尝试重启下命令行工具,如果还不行的话,只能回到第一步进行重装。
第三步:定位到项目
现在,我们已经大致了解了命令行并且知道如何简单使用它,接下来只需要两个简单的命令就能定位到文件目录并看看目录里都有些什么文件。
- cd,定位到目录
- ls,列出文件列表
建议多敲敲这两个命令,了解文件系统并知道文件都在哪里。
习惯使用了这两个命令后,就要进入我们的项目目录,这个目录各不相同,举个例子,这是我进入我项目目录的命令:
cd /Applications/XAMPP/xamppfiles/htdocs/my-project
成功进入项目目录后,我们开始安装gulp。
第四步:安装gulp
我们已经知道如何使用命令行,现在尝试点新的东西,认识npm然后安装gulp。
NPM是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的官网中可以查看和搜索所有可用的程序模块。
在命令行中输入
sudo npm install -g gulp
- sudo是以管理员身份执行命令,一般会要求输入电脑密码
npm是安装node模块的工具,执行install命令
-g表示在全局环境安装,以便任何项目都能使用它
- 最后,gulp是将要安装的node模块的名字
运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。
gulp -v
接下来,我们需要将gulp安装到项目本地
npm install —-save-dev gulp
这里,我们使用—-save-dev
来更新package.json文件,更新devDependencies
值,以表明项目需要依赖gulp。
Dependencies
可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看package.json文档。
第五步:新建Gulpfile文件,运行gulp
安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务。
- 检查Javascript
- 编译Sass(或Less之类的)文件
- 合并Javascript
- 压缩并重命名合并后的Javascript
安装依赖
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
提醒下,如果以上命令提示权限错误,需要添加
sudo
再次尝试。
新建gulpfile文件
现在,组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。
gulp只有五个方法: task
,run
,watch
,src
,和dest
,在项目根目录新建一个js文件并命名为gulpfile.js,把下面的代码粘贴进去:
gulpfile.js
// 引入 gulp
var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
}); // 合并,压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
}); // 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts'); // 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
现在,分段解释下这段代码。
引入组件
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
这一步,我们引入了核心的gulp和其他依赖组件,接下来,分开创建lint, sass, scripts 和 default这四个不同的任务。
Lint任务
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
Link任务会检查js/
目录下得js文件有没有报错或警告。
Sass任务
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Sass任务会编译scss/
目录下的scss文件,并把编译完成的css文件保存到/css
目录中。
Scripts 任务
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
scripts任务会合并js/
目录下得所有得js文件并输出到dist/
目录,然后gulp会重命名、压缩合并的文件,也输出到dist/
目录。
default任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
这时,我们创建了一个基于其他任务的default任务。使用.run()
方法关联和运行我们上面定义的任务,使用.watch()
方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。
现在,回到命令行,可以直接运行gulp任务了。
gulp
这将执行定义的default任务,换言之,这和以下的命令式同一个意思
gulp default
当然,我们可以运行在gulpfile.js中定义的任意任务,比如,现在运行sass任务:
gulp sass
(Kimi: 哇塞,酷比了哎~)
结束语
现在已经做到了设置gulp任务然后运行他们,现在再回顾下之前学习的。
- 学习了安装Node环境
- 学习了简单使用命令行
- 学习了用命令行进入项目目录
- 学习了使用npm和安装gulp
- 学习了如何运行gulp任务
另外,有一些参考资源供进一步学习:
转载:http://travismaynard.com/writing/getting-started-with-gulp
http://segmentfault.com/a/1190000000372547
前端构建工具gulp入门教程的更多相关文章
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 前端构建工具gulp入门教程(share)
参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文 ...
- 前端构建工具gulp入门
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- 前端构建工具gulp使用 (转)
http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
随机推荐
- Apache Shiro Architecture--官方文档
原文地址:http://shiro.apache.org/architecture.html Apache Shiro's design goals are to simplify applicati ...
- PHP.1-网站开发概述
网站开发概述 网站开发从本质来说,就是软件开发 1.B/S软件体系统结构 BS:浏览器与服务器的结构[降低客户端电脑的负荷,减轻维护成本,对CS的改进,可随时随地进行业务处理] #对美工要求比较高,注 ...
- 小白日记24:kali渗透测试之提权(四)--利用漏洞提权
利用漏洞提权实例 前提:已渗透进一个XP或2003系统 一.实验目标漏洞:Ms11-080 补丁:Kb2592799 漏洞信息:https://technet.microsoft.com/librar ...
- 小白日记23:kali渗透测试之提权(三)--WCE、fgdump、mimikatz
WCE windows身份认证过程 http://wenku.baidu.com/view/cf2ee127a5e9856a56126017.html #特例在登陆的目标服务器/系统,有一个w摘要安全 ...
- Spring 中jdbcTemplate 实现执行多条sql语句
说一下Spring框架中使用jdbcTemplate实现多条sql语句的执行: 很多情况下我们需要处理一件事情的时候需要对多个表执行多个sql语句,比如淘宝下单时,我们确认付款时要对自己银行账户的表里 ...
- JavaScript 关于this的理解
this是一个挺神奇的东西,经常不知道它绑定到了那里 ,因此出来了各种绞尽脑汁的面试题. 例1 <script> var person={}; person.name='li'; pers ...
- A real ROCA using Bootstrap, jQuery, Thymeleaf, Spring HATEOAS and Spring MVC
http://www.tuicool.com/articles/ENfe2u https://github.com/tobiasflohre/movie-database What is the be ...
- python 元类——metaclass
from stack overflow:http://stackoverflow.com/questions/100003/what-is-a-metaclass-in-python Classes ...
- hdu1565 网络流或状态压缩DP
对于网络流有一个定理: 最小点权覆盖集=最大网络流: 最大点权独立集=总权值-最小点权覆盖集: 网络流解法代码如下: #include<cstdio> #include<iostre ...
- WP8.1 RSA 加解密实例(导入公钥私钥)
因项目上需要用到,之前在WP8.0的环境上调试通过,现在在开发8.1时发现已不支持原来的加密库,所以无法使用以前的方法,不得已,去寻找windows命名空间下RSA的加解密方法,经过几天的尝试,将解决 ...