初识gulp

最新推荐文章于 2025-08-11 01:12:22 发布

转载最新推荐文章于 2025-08-11 01:12:22 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008795242

文章标签：

#json #操作系统 #javascript #ViewUI

之前一直听说gulp是自动构建工具，能够自动完成一些重复的任务，提高工作效率。当开始接触到sass才进一步了解它的强大。

什么是gulp？

gulp时基于Nodejs的自动任务运行器，她能自动化地完成JavaScript、cofee、Sass、Less、HTML、image、CSS等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp的使用

gulp大致可以分为几个步骤：

安装nodejs
全局安装gulp
项目安装gulp以及gulp插件
配置gulpfile.js
运行任务
安装nodejs

安装nodejs

nodejs官网
 npm 常用命令

全局安装gulp

说明：全局安装gulp目的是为了通过她执行gulp任务；
安装：命令提示符执行npm install gulp -g；
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

新建package.json

在项目下，可以通过命令创建npm init

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件，不能添加任何注释。。
cnpm是淘宝提供的一个完整的npm.org镜像

package.json

项目安装gulp以及gulp插件

在自己的项目下面运行npm install --save-dev <name>安装对应的插件。

这里以gulp-sass为例

#本地安装gulp
#全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
npm install --save-dev gulp

#在项目目录下运行
npm install --save-dev gulp-sass

新建gulpfile.js文件

说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

'use strict';
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp');//本地安装gulp所用到的地方
var sass = require('gulp-sass');

//定义一个sass任务
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')//任务针对的文件
    .pipe(sass().on('error', sass.logError))//任务调用的模块
    .pipe(gulp.dest('./css'));//生成路径
});

//默认执行
gulp.test('default',['sass'])

//监听任务
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

在项目下创建gulpfile.js文件，相关API可以点击查看 gulp API gulp sass

在node_modules的gulp-sass目录下，有一个gulp-sass的使用帮助文档README.md；

运行gulp

命令提示符执行gulp 任务名称；

执行gulp sass或者gulp default都将编译sass，后者在可加入更多的任务。
执行gulp sass:watch将监听任务文件，当其改变时自动完成编译。

参考资料

一点