2

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

什么是gulp?

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

gulp的使用

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

  1. 安装nodejs

  2. 全局安装gulp

  3. 项目安装gulp以及gulp插件

  4. 配置gulpfile.js

  5. 运行任务

  6. 安装nodejs

安装nodejs

nodejs官网
npm 常用命令

全局安装gulp

  1. 说明:全局安装gulp目的是为了通过她执行gulp任务;

  2. 安装:命令提示符执行npm install gulp -g;

  3. 查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

新建package.json

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

  • package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件,不能添加任何注释。。

  • cnpm是淘宝提供的一个完整的npm.org镜像

package.json

项目安装gulp以及gulp插件

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

  2. 这里以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将监听任务文件,当其改变时自动完成编译。

参考资料

一点


huahua
463 声望11 粉丝

fighting


引用和评论

0 条评论