参考自:http://segmentfault.com/a/1190000000372547

资源:

  1. npm上得gulp组件
  2. gulp的Github主页
  3. 官方package.json文档
  4. gulp中文官网

本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。

第一步:安装Node

首先,最基本也最重要的是,我们需要搭建node环境。访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。

安装好后记得配置环境变量   NODE_PATH="C:\Users\Gaming\node_modules"   (引号里的为自己node的安装路径),  配置方法 如下:

第二步:使用命令行

也许现在你还不是很了解什么是命令行——OSX中的终端(Terminal),windows中的命令提示符(Command Prompt),但很快你就会知道。它看起来没那么简单,但一旦掌握了它的窍门,就可以很方便的执行很多命令行程序,比如Sass,Yeoman和Git等,这些都是非常有用的工具。

如果你很熟悉命令行,直接跳到步骤四。

为了确保Node已经正确安装,我们执行几个简单的命令。

node -v

回车(Enter),如果正确安装的话,你会看到所安装的Node的版本号,接下来看看npm。

npm -v

这同样能得到npm的版本号。

如果这两行命令没有得到返回,可能node就没有安装正确,尝试重启下命令行工具,如果还不行的话,只能回到第一步进行重装。

第三步:定位到项目

现在,我们已经大致了解了命令行并且知道如何简单使用它,接下来只需要两个简单的命令就能定位到文件目录并看看目录里都有些什么文件。

  1. cd,定位到目录
  2. ls,列出文件列表

建议多敲敲这两个命令,了解文件系统并知道文件都在哪里。

习惯使用了这两个命令后,就要进入我们的项目目录,这个目录各不相同,举个例子,这是我进入我项目目录的命令:

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

成功进入项目目录后,我们开始安装gulp。

第四步:安装gulp

我们已经知道如何使用命令行,现在尝试点新的东西,认识npm然后安装gulp。

NPM是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的官网中可以查看和搜索所有可用的程序模块。

在命令行中输入

 npm install -g gulp 
  1. npm是安装node模块的工具,执行install命令
  2. -g表示在全局环境安装,以便任何项目都能使用它

  3. 最后,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 gulp-jshint-html-reporter --save-dev 

新建gulpfile文件

现在,组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

gulp只有五个方法: taskrunwatchsrc,和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('jshint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
// .pipe(jshint.reporter('default')); //默认在命令行里输出结果
.pipe(jshint.reporter('gulp-jshint-html-reporter', {filename:'jshint-report.html'})); //输出结果到 自定义的html文件 }); // 编译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

结束语

现在已经做到了设置gulp任务然后运行他们,现在再回顾下之前学习的。

  1. 学习了安装Node环境
  2. 学习了简单使用命令行
  3. 学习了用命令行进入项目目录
  4. 学习了使用npm和安装gulp
  5. 学习了如何运行gulp任务

前端构建工具gulp入门教程(share)的更多相关文章

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

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

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

    本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...

  3. 前端构建工具gulp入门

    本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...

  4. (转载)前端构建工具gulp使用

    前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...

  5. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  6. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  7. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  8. 前端构建工具gulp使用 (转)

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  9. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

随机推荐

  1. 【Python④】python恼人的字符串,格式化输出

    恼人的字符串 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.由于计算机是美国人发明的,因此,最早只有127个字母被编码到计算机里,也就是大小写英文字母.数字和一些符号,这个编码 ...

  2. Titanium studio安装

    在Win7 Titanium Studio的安装过程. 1.准备工作 Titanium存储空间的要求,Titanium Studio 需要1 GB.Android SDK需要1.5 GB.Blackb ...

  3. C++多线程3

    #include "stdafx.h" #include <windows.h> #include <process.h> int g_count; ; u ...

  4. linux中的内存申请函数的区别 kmalloc, vmalloc

    kmalloc是返回连续内存的内存分配函数 vmalloc是返回较大内存空间的,不需要连续的内存分配函数.其速度较慢,并且不能在中断上下文调用.

  5. C#中DateTime.Now.ToString()

    项目开发中遇到一个问题:C#编写的SQL语句中有时间值,刚开始直接将DateTime.Now进行toString()处理,源代码调试程序运行正常. 然后我的电脑重装了系统,再次运行程序就报错“从字符串 ...

  6. selenium问题记录

    错误一: 错误信息:Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output: 原 ...

  7. 计算机开放电子书汇总(包括二十多本python相关的图书教程)

    计算机开放电子书汇总(包括二十多本python相关的图书教程) https://github.com/it-ebooks/it-ebooks-archive 这个汇总包含了各种计算机相关的开放图书和文 ...

  8. IOS导航栏颜色渐变与常用属性

    (转:http://www.cnblogs.com/Lingchen-start/archive/2015/10/23/4904361.html) 今年很忙,忙的写日志的时间都很少.  少的可怜. 自 ...

  9. sql语句的匹配

    like 的通配符有两种 %(百分号):代表零个.一个或者多个字符. _(下划线):代表一个数字或者字符. 1. name以"李"开头 where name like '李%' 2 ...

  10. 服务器列表里找不到OracleOraDb10g_home1TNSListener

    先安装的ORACLE DB,后配置的数据库,TNSNAMES.ORA, LISTENER.ORA配置完毕,客户端连接不上TNS服务器,发现服务列表里没有OracleOraDb10g_home1TNSL ...