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

 更新时间:2024年08月15日 17:18:25   投稿:goldensun  
Gulp是一个在使用上比Grunt更加简洁的自动化工具(文中附有对比),和Node的npm包管理器配合使用非常方便,下面就记录一下在Mac OS上安装使用Node.js的项目自动化构建工具Gulp的方法:

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

2016618103000328.jpg (732×550)

于是我换成了 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,最终取得一个档案。这样的流程加快建构过程,省去读取及写出不必要的档案,只需要最终的一个档案。

相关文章

  • Node.js pipe实现源码解析

    Node.js pipe实现源码解析

    这篇文章主要介绍了Node.js pipe实现源码解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • nodejs控制台打印高亮代码的实现方法

    nodejs控制台打印高亮代码的实现方法

    这篇文章主要给大家介绍了关于nodejs控制台打印高亮代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 玩转Koa之核心原理分析

    玩转Koa之核心原理分析

    这篇文章主要介绍了玩转Koa之核心原理分析,本文从封装创建应用程序函数、扩展res和req、中间件实现原理、异常处理的等这几个方面来介绍,感兴趣的可以了解一下
    2018-12-12
  • Node.js中环境变量process.env的一些事详解

    Node.js中环境变量process.env的一些事详解

    这篇文章主要给大家介绍了关于Node.js中环境变量process.env的一些事,文中通过示例代码介绍的非常详细,对大家学习或者使用node.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 关于没有彻底清除node和npm的解决方法

    关于没有彻底清除node和npm的解决方法

    最近因为npm和node的版本不匹配遇到了许多困难,比如更新npm的版本,结果它给报错了,查阅了好多资料,发现就是node和npm卸载的时候,还有残留,所以本文给大家介绍了关于没有彻底清除node和npm的解决方法,需要的朋友可以参考下
    2024-03-03
  • node+koa2+mysql+bootstrap搭建一个前端论坛

    node+koa2+mysql+bootstrap搭建一个前端论坛

    本篇文章通过实例给大家分享了用node+koa2+mysql+bootstrap搭建一个前端论坛的步骤,有需要的朋友参考下。
    2018-05-05
  • async/await优雅的错误处理方法总结

    async/await优雅的错误处理方法总结

    这篇文章主要给大家介绍了关于async/await优雅的错误处理方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Node.js用Socket.IO做聊天软件的实现示例

    Node.js用Socket.IO做聊天软件的实现示例

    本文主要介绍了Node.js用Socket.IO做聊天软件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Node.js使用WebAssembly

    Node.js使用WebAssembly

    本文主要介绍了Node.js使用WebAssembly,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Node Puppeteer图像识别实现百度指数爬虫的示例

    Node Puppeteer图像识别实现百度指数爬虫的示例

    本篇文章主要介绍了Node Puppeteer图像识别实现百度指数爬虫的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论