为什么要使用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. 常见排序的JAVA实现和性能测试

    五种常见的排序算法实现 算法描述 1.插入排序 从第一个元素开始,该元素可以认为已经被排序 取出下一个元素,在已经排序的元素序列中从后向前扫描 如果该元素(已排序)大于新元素,将该元素移到下一位置 重 ...

  2. 都铎王朝第一至四季/全集The Tudors迅雷下载

    都铎王朝 第一.二.三.四季 The Tudors Season (2007-2010) 本季看点:本剧讲述了年轻的亨利八世对英国的统治以及他的婚姻生活,带有传奇色彩.Showtime电视台的古装热门 ...

  3. 《Web性能权威指南》

    <Web性能权威指南> 基本信息 原书名:High performance browser networking 原出版社: O'Reilly Media 作者: (加)Ilya Grig ...

  4. 概率校准与Brier分数

    1.再提逻辑回归 前面已经讲过了逻辑回归,这里不再细讲,只是简单的说一个函数,主要是方便大家更好的理解概率校准. 在逻辑回归中,用的最多的就是sigmod函数,这个函数的作用就是把无限大或者无限小的数 ...

  5. JMap与JStack

    用JMap和JStack做堆dump和线程dump 命令 1. jmap -dump:format=b,file=filename pidjmap -dump:format=b,file=jmap02 ...

  6. 【ContestHunter】【弱省胡策】【Round0】（A）&【Round1】（B）

    DP+容斥原理or补集转化?/KD-Tree 唔……突然发现最早打的两场(打的最烂的两场)没有写记录……(太烂所以不忍记录了吗... 还是把搞出来了的两道题记录一下吧= =勉强算弥补一下缺憾…… Ro ...

  7. 秒懂，Java 注解 （Annotation）你可以这样学

    转自: https://blog.csdn.net/briblue/article/details/73824058 文章开头先引入一处图片. 这处图片引自老罗的博客.为了避免不必要的麻烦,首先声明我 ...

  8. Linux awk 命令

    AWK是一种处理文本文件的语言,是一个强大的文本分析工具. 之所以叫AWK是因为其取了三位创始人 Alfred Aho,Peter Weinberger, 和 Brian Kernighan 的Fam ...

  9. 用于HTML5移动开发的10大移动APP开发框架【转】

    今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架,能够帮助开发者更加高效的开发移动Web应用.. 十款移动APP开发框架: 1.jquery m ...

  10. Win7局域网打印机共享设置（详细图文流程）

    本文将向读者说明在Win7下如何实现同个局域网内共享打印机.经过测试,Win7之间和Win7与XP之间均可正常连接. 第一步:取消禁用Guest用户 1. 点击[开始]按钮,在[计算机]上右键,选择[ ...