为什么要使用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. sendto 和 recvfrom 函数

    sendto recvfrom

  2. 好汉两个半第一季/全集Two And A Half Men迅雷下载

    第一季 Two and a Half Men Season 1 (2003)看点:Charlie是一个潇洒自由的单身汉,但正面临离婚危机的兄弟Alan带着儿子Jake的突然来访完全打乱了Charlie ...

  3. 实用ExtJS教程100例-008：使用iframe填充ExtJS Window组件

    上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...

  4. ubuntu php 安装

    ---apache2sudo apt-get install apache2 ---phpsudo apt-get install libapache2-mod-php5 php5 php5-gd p ...

  5. Eclipse 汉化的和修改字体的方法

    先进入 http://www.eclipse.org/babel/downloads.php 找到自己对应版本的网址,然后复制下来. 然后,进入eclipse.点工具栏上的Help - Install ...

  6. Pandas 快速入门（二）

    本文的例子需要一些特殊设置,具体可以参考 Pandas快速入门(一) 数据清理和转换 我们在进行数据处理时,拿到的数据可能不符合我们的要求.有很多种情况,包括部分数据缺失,一些数据的格式不正确,一些数 ...

  7. LINUX CentOS7安装字体库

    LINUX CentOS7安装字体库 2017年12月26日 17:06:07 q260996583 阅读数:4866更多 个人分类: linux   JAVA画图时常用到Font 类对象 这样的对象 ...

  8. 网络编程之webclient和httpwebrequest的使用

    (1)Lambda表达式 “Lambda表达式”是一个匿名函数,它可以包含表达式和语句,并且可用于创建委托或表达式树类型. 所有 Lambda 表达式都使用 Lambda 运算符 =>,该运算符 ...

  9. c++实现Xml和json互转【转】

    https://blog.csdn.net/kfy2011/article/details/51774242 1.下载c语言的cJson库源码,库很小,只有两个文件cJSON.c和cJSON.h.下载 ...

  10. 解决easyui combobox不能默认选中

    开始出现很奇怪的问题,ff没有问题IE8还是会出现不能选中默认项的问题,更改了select.input的方式,数据加载方式也更改为json的方式,未果,最后将datagrid toolbar的初始化放 ...