为什么要使用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. JForum 源码分析

    怎么才算好的源码分析呢?当然我这个肯定不算.我想大概分为几个层面吧,写写注释那算最基本的了,写写要点思路和难点,算是还不错拉,再难的就是跳出源码举一反三,形成自己的一套思路吧.好好努力吧. 这次针对的 ...

  2. 你真的懂Handler.postDelayed()的原理吗?

    转载自http://www.dss886.com/2016/08/17/01/   阅读之前先问大家一个问题:Handler.postDelayed()是先delay一定的时间,然后再放入messag ...

  3. caffe中的学习率的衰减机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Julialove102123/article/details/79200158 根据  caffe/ ...

  4. Spring Boot Maven Plugin打包异常及三种解决方法：Unable to find main class

    [背景]spring-boot项目,打包成可执行jar,项目内有两个带有main方法的类并且都使用了@SpringBootApplication注解(或者另一种情形:你有两个main方法并且所在类都没 ...

  5. Tensorflow Serving 模型部署和服务

    http://blog.csdn.net/wangjian1204/article/details/68928656 本文转载自:https://zhuanlan.zhihu.com/p/233614 ...

  6. 本地时间转化成 GMT 时间

    DateTime.Now.ToUniversalTime().ToString("yyMMddHHmmss");

  7. C语言变长数组data[0]【总结】

    1.前言 今天在看代码中遇到一个结构中包含char data[0],第一次见到时感觉很奇怪,数组的长度怎么可以为零呢?于是上网搜索一下这样的用法的目的,发现在linux内核中,结构体中经常用到data ...

  8. Python 和 Asyncio 编写在线多人游戏（一）

    在技术和文化领域,大规模多人在线游戏(MMO)毋庸置疑是我们当今世界的潮流之一.很长时间以来,写一个 MMO 游戏这件事总是会涉及到大量的预算与复杂的底层编程技术.不过在最近这几年,事情迅速发生了变化 ...

  9. bash shell seq的用法

    seq 1 3 100 , 表示起始值为1, 间隔为3,终点值为100 #!/bin/bash aa=(1 2 3 17) #for i in 1 2 3 13 for i in ${aa[*]} d ...

  10. MySQL数据库localhost的root用户登陆遭遇失败

    问题:Access denied for user 'root'@'localhost' (using password: YES)打开MySQL目录下的my.ini文件(Linux的话是/etc/m ...