使用Gulp

为什么要使用Gulp

在前端开发中通常须要做,预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作,而使用Gulp能够自己主动化的完毕这些工作,从而提高站点的开发效率,在我的博客使用Less中介绍了将Less文件编译成CSS文件的方法,细致观察能够看到假设依照博客中介绍的方法。在编译多个Less文件或者编译不同目录下的Less文件时须要多次运行Less文件编译命令,而使用Gulp能够一次性完毕这些操作。


Gulp是什么

Gulp是一个能够自己主动化完毕我们开发过程中大量的反复工作的工具,使用Gulp能够自己主动化的完毕如,预处理语言的编译、js文件的压缩、css文件的压缩、html文件的压缩、图片体积优化等工作。

Gulp的特性

  • 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单。复杂的任务可管理
  • 构建高速 利用 Node.js 流的威力,你能够高速构建项目并降低频繁的 IO 操作
  • 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作
  • 易于学习 通过最少的 API。掌握 Gulp 毫不费力。构建工作尽在掌握:如同一系列流管道

Gulp的经常使用站点

Gulp的安装与使用

安装Gulp

1. 全局安装Gulp

npm install --global gulp

2. 创建一个code目录。而且进入到code目录下
以下的命令是在Git bash中运行的。运行这几条命令。须要安装Git。没有安装Git的能够在电脑上自己手动创建一个code目录,而且进入code目录下

mkdir code (创建code目录)
cd code (进入code目录下)

3.运行以下的命令创建package.json文件

npm init

在命令行中运行npm init命令的时候会出现下图所看到的的要求用户输入name、version等值。当不清楚这些值的含义的时候,一直按回车键,会自己主动使用默认值
这里写图片描写叙述

4.完毕这些操作后会在code文件里会生成一个package.json文件
这里写图片描写叙述

5.打开package.json文件能够看到package.json中记录了一些当前项目的信息
name: 项目的名称
version: 项目的版本号
description: 项目的描写叙述信息
main: 项目的入口函数
scripts: scripts属性是一个对象,里边指定了项目的生命周期个各个环节须要运行的命令
author: 项目的作者
license: 项目的许可证
devDependencies: 项目依赖的插件
repository: 项目资源库

6.在命令行中运行以下的命令,安装Gulp

npm install --save-dev gulp

7.创建一个Gulp的主文件gulpfile.js,而且在gulpfile.js中加入以下的代码
Gulp主文件用于注冊任务

//加载gulp模块
var gulp = require('gulp');

/**
 * 注冊一个任务
 * @param 任务名称
 * @param 自己主动运行的函数
 */
gulp.task('say', function() {
    console.log("hello world !");
});

8.使用gulp
打开命令行。而且在命令行中运行gulp say命令。能够看到在控制台中输出了一句”say hello”表示Gulp成功安装

使用Gulp实现一个文件拷贝任务

以下的操作都是在项目中安装了Gulp的情况下进行的。没有安装Gulp能够看前面的Gulp的安装与使用中的内容

1.创建一个src目录。而且在src目录下创建一个index.html文件
在Git Bash中运行以下的命令创建一个src目录,并在src目录下创建一个index.htmll文件。没有安装Git的能够手动创建

mkdir src (创建src目录)
cd src (进入到src目录中)
touch index.html (创建index.html文件)

2.向index.html中加入HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>这是一个简单的web页面</h1>        
</body>
</html>

3.创建一个Gulp的主文件gulpfile.js,而且在gulpfile.js中加入以下的代码

//加载gulp模块
var gulp = require('gulp');

//文件拷贝任务
gulp.task('copy', function() {

    //获取src目录下的index.html文件
    gulp.src('src/index.html')

    //将index.html复制到dist目录中
    .pipe(gulp.dest('dist/'));
});

4.在命令行中运行文件拷贝任务,将src目录下的index.html文件复制到dist目录下

gulp copy

文件拷贝命令运行完毕后能够看到在code目录下自己主动创建了一个dist目录。而且在dist目录下自己主动创建了一个index.html文件,表示文件拷贝任务运行成功
这里写图片描写叙述

5.自己主动运行文件拷贝任务
在这个文件拷贝任务中。有一个很大的弊端,就是每次更新index.html中的代码的时候。都要在命令行中运行一次gulp copy命令。这样做做了反复性操作,也不符合使用Gulp实现自己主动化的特点,为了改成自己主动化运行文件拷贝命令。能够改动gulpfile.js中的代码

//加载gulp模块
var gulp = require('gulp');

//文件拷贝任务
gulp.task('copy', function() {

    //获取src目录下的index.html文件
    gulp.src('src/index.html')

    //将index.html复制到dist目录中
    .pipe(gulp.dest('dist/'));
});

//监视copy任务
gulp.task('dist', function() {

    //当src目录下的index.html文件发生变化的时候
    //运行copy任务
    gulp.watch('src/index.html', ['copy']);
});

6.改动好gulpfile.js中的代码后在命令行中运行以下的命令

gulp dist

6.此时仅仅要改动src目录的index.html文件,改动完毕后仅仅要一保存,HTML代码就能同一时候同步到dist目录下的index.html中
这里写图片描写叙述

使用Gulp实现自己主动将Less编译成CSS

以下的操作都是在项目中安装了Gulp的情况下进行的,没有安装Gulp能够看前面的Gulp的安装与使用中的内容

1.安装gulp-less插件

npm install gulp-less --save-dev

2.创建Less文件
在Git Bash中运行以下的命令创建一个less目录。而且在less目录下创建一个style.less文件,在没有安装Git Bash的情况下能够手动创建

mkdir less (创建less目录)
cd less (进入less目录)
touch style.less (创建style.less文件)

3.向style.less中加入一段简单的Less代码

@primary-color: #fff;

body {
    background-color: @primary-color;

    .container {
        width: 1028px;

        .row {
            padding: 0 15px;
        }
    }
}

4.创建一个Gulp的主文件gulpfile.js。而且在gulpfile.js中加入以下的代码

//加载gulp模块
var gulp = require('gulp');
var less = require('gulp-less');

//创建一个将Less编译成CSS的任务
gulp.task('less', function() {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css/'));
});

//监视less任务
//当less文件发生变化的时候。会自己主动将Less转换成CSS
gulp.task('watchLess', function() {
    gulp.watch('./less/*.less', ['less']);
});

5.在命令行中运行以下的命令,启动将Less文件编译成CSS文件的任务

gulp watchLess

5.改动less目录下的style.less
打开less目录下的style.less文件,而且改动style.less文件,当保存后会自己主动将style.less文件编译成css文件,而且会自己主动创建一个css目录,在css目录下自己主动创建一个style.css文件用于存储生成的CSS代码
这里写图片描写叙述

posted @ 2017-08-17 19:11  yfceshi  阅读(187)  评论(0编辑  收藏  举报