汇盛国际注册:在Mac OS上安装使用Node.js的项目自动

时间: 作者:水劳

  

[Node,Gulp,JavaScript,js]在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 的浏览器插件,插件地址:支持 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  
  打开浏览器,访问 然后尝试修改 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,最终取得一个档案。这样的流程加快建构过程,省去读取及写出不必要的档案,只需要最终的一个档案。

  
  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台