在Mac OS上安装使用Node.js的项目自动化构建工具Gulp


Posted in Javascript onJune 18, 2016

安装 node.js
首先需要安装 node.js, 通常情况下,只需要到 Node.js 官网下载安装包安装就可以了。不过我可耻的失败了,弹出了如下错误:

在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

于是我换成了 brew 大法:

brew install nodejs

安装 Gulp

gulp 使用 Node.js 的 npm 命令安装:

npm install --global gulp

然后在项目目录中还要安装一遍:

npm install --save-dev gulp

我对这步的操作比较费解。以我多年码农经验,即然全局安装过了,应该就可以在作何地方使用了。但 gulp 显然不是这样。如果不在项目目录中执行这一步,使用 gulp 命令时会提示以下错误:

… Local gulp not found in …

… Try running: npm install gulp

最后在项目目录中执行一下 gulp 命令,如果输出以下内容,那就表示安装好了:

… No gulpfile found

简单例子

下面展示使用 Gulp 构建一个静态网站开发服务端,并且支持实时刷新(livereload)功能。

首先需要安装 livereload 的浏览器插件,插件地址:http://livereload.com/extensions/,支持 Chrome, Firefox, Safari 三大浏览器。插件安装后,会在浏览器上出现一个按钮,这个按钮有两个状态,实心圆点表示插件已启用,空心圆点表示插件未启用。切记切记!

然后创建一个简单的项目结构:

./gulpfile.js
./public/
./public/index.html

使用以下命令安装 gulp 和相关的组件:

npm install --save-dev gulp gulp-connect

gulp-connect 是 gulp 插件,提供了静态 web 服务端功能,并整合了 livereload 功能。

接下来需要编辑 gulpfile.js 文件,内容如下:

var gulp = require('gulp'),
    connect = require('gulp-connect')

  gulp.task('server', function() {
    connect.server({
      root: 'public',
      livereload: true
    })
  })

  gulp.task('html', function() {
    gulp.src('./public/*.html').pipe(connect.reload())
  })

  gulp.task('watch', function() {
    gulp.watch(['./public/*.html'], ['html'])
  })

  gulp.task('default', ['watch', 'server'])

最后运行这个 web 服务器:

gulp
打开浏览器,访问 http://localhost:4000。然后尝试修改 index.html 文件的内容后保存,正常情况下,浏览器端应该会自动刷新并显示修改后的内容。

Gulp与Grunt简单对比
让我们来看个范例,分别在Gulp及Grunt建构Sass:

Grunt:

sass: { 
 dist: {
  options: {
   style: 'expanded'
  },
  files: {
   'dist/assets/css/main.css': 'src/styles/main.scss',
  }
 }
},

autoprefixer: { 
 dist: {
  options: {
   browsers: [
    'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
   ]
  },
  src: 'dist/assets/css/main.css',
  dest: 'dist/assets/css/main.css'
 }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Grunt需要各别配置外挂,指定其来源与目的路径。例如,我们将一个档案作为外挂Sass的输入,并储存输出结果。在设置Autoprefixer时,需要将Sass的输出结果作为输入,产生出一个新档案。来看看在Gulp中同样的配置:

Gulp:

gulp.task('sass', function() { 
 return gulp.src('src/styles/main.scss')
  .pipe(sass({ style: 'compressed' }))
  .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  .pipe(gulp.dest('dist/assets/css'))
});

在Gulp中我们只需要输入一个档案即可。经过外挂Sass处理,再传到外挂Autoprefixer,最终取得一个档案。这样的流程加快建构过程,省去读取及写出不必要的档案,只需要最终的一个档案。

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
Javascript中prototype的使用详解
Jun 18 #Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 #Javascript
jQuery UI Bootstrap是什么?
Jun 17 #Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
jquery实现div阴影效果示例代码
2013/09/16 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
js实现下一页页码效果
2017/03/07 Javascript
深入理解vue Render函数
2017/07/19 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python 实现兔子生兔子示例
2019/11/21 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
python删除某个目录文件夹的方法
2020/05/26 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
介绍一下游标
2012/01/10 面试题
大学毕业感言
2014/01/10 职场文书
开业庆典答谢词
2014/01/18 职场文书
消防安全承诺书
2014/05/22 职场文书
十佳青年事迹材料
2014/08/21 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
让世界充满爱观后感
2015/06/10 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang