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

前端技术 2023/09/02 JavaScript

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

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

本文地址：https://www.stayed.cn/item/4924

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案