Mac底下node gulp的安装和使用方法

写在前面:

这篇文章是对node的gulp环境搭建、配置,主要是使用gulp对自己开发的前端内容进行打包压缩的方法,而并非是对后台数据的处理,当然可以通过自身的扩展更好的使用node的环境。

步骤一

首先我们需要去node官网下载node安装包,具体安装步骤自行安装。(既然是在使用node,对安装这种问题就不用详解了!)


步骤二

1、打开Mac的终端输入:

  1. node -v

回车,安装成功会显示node的版本号。

2、继续在终端输入:

  1. npm -v

检查npm是否安装成功,成功会显示版本号,安装node的时候集成了npm,所以是一起安装的。(安装大部分插件都需要借助npm)。

3、到这里node已经成功安装了,(一般情况下是会成功的,失败了是个例外,不在本章的说明范围内)

步骤三

1、接下来安装全局gulp ,在终端输入:(注:这是在全局模式下安装的gulp,而不是在你的每个项目中安装的gulp)

  1. npm install -g gulp

然后就会看到一堆程序员的代码开始刷屏,安装完成之后使用

  1. npm gulp -v

检查gulp是否安装成功,安装成功会显示版本号。
到这里我们的node gulp 已经安装完成。

步骤四

我们开始创建自己的项目,建议将我们的项目目录放在Documents目录下,Documents目录其实就是打开我们的finder直接点击文档即可。

这里我们创建一个 demo 的目录,再在 demo 目录下面创建 css / js / images 目录。

在终端中cd到我们的项目的目录中:

  1. cd /Users/ 电脑用户名 /Documents/demo

然后我们需要将全局安装的gulp引入我们的项目目录中(这一步很重要)

  1. nom link gulp

然后我们就会发现我们创建的 demo文件夹中多了一个 node_modules 文件夹创建了,不然在我们后面执行的时候会报错,错误提示如下

  1. [10:50:41] Local gulp not found in ~/Documents/node
  2. [10:50:41] Try running: npm install gulp

引入文件包之后就不会有了。下面我们开始使用gulp

步骤五

node gulp运行需要依赖gulpfile.js文件,所以我们在我们项目的目录下创建gulpfile.js文件并保存,然后在gulpfile.js文件中输入

  1. // 获取 gulp
  2. var gulp = require("gulp");

引入我们的gulp包,然后再输入:

  1. // 测试gulp
  2. gulp.task("viwe", function() {
  3. console.log("gulp可以正常使用了!");
  4. });

上面的代码是调用了gulp的gulp.task这个API接口

  • gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。
  • gulp.src(path) - 选择文件,传入参数是文件路径。
  • gulp.dest(path) - 输出文件
  • gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

gulp API参考文档

然后我们在终端输入:

  1. gulp view

然后我们就可以看到我们console.log的内容会被打印出来,说明我们的gulp可以正常运行了。

步骤六

1、压缩js文件:

(以下所有的终端操作都基于demo目录)

我们继续在刚才编辑的gulpfile.js文件中输入:

  1. // 获取 uglify 模块(用于压缩 JS)
  2. var uglify = require("gulp-uglify")

此时我们的gulpfile.js文件中的全部内容为如下:

  1. // 获取 gulp
  2. var gulp = require("gulp");
  3. // 获取 uglify 模块(用于压缩 JS)
  4. var uglify = require("gulp-uglify");

我们引入了gulp-uglify所以我们需要去下载gulp-uglify,直接在终端输入:

  1. npm install gulp-uglify

又看见一堆代码闪过终端,下载完成之后,我们需要将我们js目录下面的所有.js文件压缩到/dist/js目录下;我们需要继续在gulpfile.js文件中输入:

  1. // 压缩 js 文件
  2. // 在命令行使用 gulp script 启动此任务
  3. gulp.task("script", function() {
  4. // 1. 找到文件
  5. gulp.src("js/*.js")
  6. // 2. 压缩文件
  7. .pipe(uglify())
  8. // 3. 另存压缩后的文件
  9. .pipe(gulp.dest("dist/js"))
  10. });

上面已经描述过几种API的作用了,详细了解请参考文档
这时我们在/demo/js目录下面创建的.js文件就可以被压缩了。
当我们在js目录下编写好.js代码之后我们就可以在终端输入下命令即可:

  1. gulp script

然后我们就会看到在demo目录下面自动生成了dist/js的目录,下面的文件就是被压缩之后的文件。

2、压缩css文件:

下面的介绍我就比较简单的讲述步骤就可以了。在gulpfile.js文件中引入 gulp-minify-css 用于压缩css

  1. // 获取 minify-css 模块(用于压缩 CSS)
  2. var minifyCSS = require("gulp-minify-css");

css压缩执行的方法如下:

  1. // 压缩 css 文件
  2. // 在命令行使用 gulp css 启动此任务
  3. gulp.task("css", function () {
  4. // 1. 找到文件
  5. gulp.src("css/*.css")
  6. // 2. 压缩文件
  7. .pipe(minifyCSS())
  8. // 3. 另存为压缩文件
  9. .pipe(gulp.dest("dist/css"))
  10. })

然后去下载。gulp-minify-css

  1. npm install gulp-minify-css

下载完成即可执行;
当我们想再同一个命令中执行多个模块时,(下面我们以同时压缩jscss为例),其代码如下:

  1. // 使用 gulp.task("default") 定义默认任务
  2. // 在命令行使用 gulp 启动 script 任务和 auto 任务
  3. gulp.task("default", ["script", "css"]);

然后我们就可以直接运行命令gulp就可以执行我们自定义的模块:

  1. gulp

3、我就不一一列举了,下面包含了常用的cssjsimagelesssass的压缩代码(注意很多模块需要自行去 npm 下载):
模块所有使用的代码如下:

  1. // 获取 gulp
  2. var gulp = require("gulp");
  3. // 获取 uglify 模块(用于压缩 JS)
  4. var uglify = require("gulp-uglify");
  5. // 获取 minify-css 模块(用于压缩 CSS)
  6. var minifyCSS = require("gulp-minify-css");
  7. // 获取 gulp-imagemin 模块(用于压缩图片)
  8. var imagemin = require("gulp-imagemin");
  9. // 获取 gulp-less 模块(编译less)
  10. var less = require("gulp-less");
  11. // 获取 gulp-ruby-sass 模块(编译sass)
  12. var sass = require("gulp-ruby-sass");
  13. // 测试gulp
  14. gulp.task("viwe", function() {
  15. console.log("gulp可以正常使用了!");
  16. });
  17. // 压缩 js 文件
  18. // 在命令行使用 gulp script 启动此任务
  19. gulp.task("script", function() {
  20. // 1. 找到文件
  21. gulp.src("js/*.js")
  22. // 2. 压缩文件
  23. .pipe(uglify())
  24. // 3. 另存压缩后的文件
  25. .pipe(gulp.dest("dist/js"))
  26. });
  27. // 压缩 css 文件
  28. // 在命令行使用 gulp css 启动此任务
  29. gulp.task("css", function () {
  30. // 1. 找到文件
  31. gulp.src("css/*.css")
  32. // 2. 压缩文件
  33. .pipe(minifyCSS())
  34. // 3. 另存为压缩文件
  35. .pipe(gulp.dest("dist/css"))
  36. })
  37. // 压缩图片任务
  38. // 在命令行输入 gulp images 启动此任务
  39. gulp.task("images", function () {
  40. // 1. 找到图片
  41. gulp.src("images/*.*")
  42. // 2. 压缩图片
  43. .pipe(imagemin({
  44. progressive: true
  45. }))
  46. // 3. 另存图片
  47. .pipe(gulp.dest("dist/images"))
  48. });
  49. // 编译less
  50. // 在命令行输入 gulp less 启动此任务
  51. gulp.task("less", function () {
  52. // 1. 找到 less 文件
  53. gulp.src("less/**.less")
  54. // 2. 编译为css
  55. .pipe(less())
  56. // 3. 另存文件
  57. .pipe(gulp.dest("dist/css"))
  58. });
  59. // 编译sass
  60. // 在命令行输入 gulp sass 启动此任务
  61. gulp.task("sass", function() {
  62. return sass("sass/")
  63. .on("error", function (err) {
  64. console.error("Error!", err.message);
  65. })
  66. .pipe(gulp.dest("dist/css"))
  67. });
  68. // 在命令行使用 gulp auto 启动此任务
  69. gulp.task("auto", function () {
  70. // 监听文件修改,当文件被修改则执行 script 任务
  71. gulp.watch("js/*.js", ["script"]);
  72. gulp.watch("css/*.css", ["css"]);
  73. gulp.watch("images/*.*)", ["images"]);
  74. gulp.watch("less/**.less", ["less"]);
  75. gulp.watch("sass/**/*.scss", ["sass"]);
  76. })
  77. // 使用 gulp.task("default") 定义默认任务
  78. // 在命令行使用 gulp 启动 script 任务和 auto 任务
  79. gulp.task("default", ["script", "images","css","less","sass"]);

基本的编译过程都已经描述完了。
文章参考文档:
https://github.com/nimojs(中文介绍,完全是福利啊!)
http://www.gulpjs.com.cn/docs/api/
https://laracasts.com

评论: