为什么要使用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代码

使用Gulp的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题（二）

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. 用开源项目cropper实现对图片中任意部分进行裁剪

     红色区域为截图控件的区域.    开源项目地址:https://github.com/edmodo/cropper croper这个开源项目可以对一个图片进行任意区域的街区,并且可以设置图片的旋转角 ...

  2. 安卓开发环境配置及HelloWorld

    一:JAVA 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 1.1 ...

  3. Java SPI(Service Provider Interface)简介

    SPI 简介 SPI 全称为(Service Provider Interface),是JDK内置的一种服务提供发现机制. 一个服务(Service)通常指的是已知的接口或者抽象类,服务提供方就是对这 ...

  4. mysqlpump：更加合理的mysql数据库逻辑备份工具

    端看参见就知道了! E:\mysql-8.0.12-winx64>mysqlpump --helpmysqlpump Ver 8.0.12 for Win64 on x86_64 (MySQL ...

  5. osg for android学习之一：windows下编译(亲测通过)【转】

    1. 首先需要一个OSG for android的环境 (1)NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一):新 ...

  6. js命名空间写法

    很早知道这种写法,由于基础面向对象不够扎实一直在回避,但是面对整站这种方法还是有必要会 <div id="div1">111</div> <div i ...

  7. 【ElasticSearch】ElasticSearch-索引优化-自定义索引

    ElasticSearch-索引优化-自定义索引 es 指定 索引 字段_百度搜索 [es]创建索引和映射 - 匡子语 - 博客园 reindex,增加字段,并新增数据 - Elastic中文社区 e ...

  8. 【R】函数-概率函数

  9. （转）mobile cpu上禁用alpha test的相关总结

    转自:http://www.cnblogs.com/TracePlus/p/4037165.html 因为,每家芯片的特性不同,根据向framebuffer写法的不同,分为tile-based的mob ...

  10. Softmax 函数的特点和作用是什么？

    作者:张欣链接:https://www.zhihu.com/question/23765351/answer/98897364来源:知乎著作权归作者所有,转载请联系作者获得授权. softmax 回归 ...