为什么要使用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. WordPress主题开发实例：查询单篇文章

    xxx/?page_id=5 想在首页调用以上页面的内容怎么做呢? 完整: <?php //查询 $my_query = new WP_Query( 'page_id=5' ); if($my_ ...

  2. 漏洞风险评估：CVSS介绍及计算

    CVSS 通用弱点评价体系(CVSS)是由NIAC开发.FIRST维护的一个开放并且能够被产品厂商免费采用的标准.利用该标准,可以对弱点进行评分,进而帮助我们判断修复不同弱点的优先等级. CVSS : ...

  3. redis + Tomcat 8 的session共享解决

    如果英文不错的看,建议直接看官网吧,官网写的挺清楚.下面的内容是转载的一篇文章,自己补充了一些,供大家参考,也欢迎大家一起讨论 官方截止到2015-10-12前是不支持Tomcat8的,详情见官网:h ...

  4. 用ArrayAdapter来创建Spinner（自定义布局、默认布局、动态内容、静态内容）

             android:dropDownWidth 下拉列表宽度 android:dropDownHorizontalOffset 下拉列表距离左边的距离 android:dropDownV ...

  5. System.DllNotFoundException:“无法加载 DLL“librfc32.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。”

    System.DllNotFoundException:“无法加载 DLL“librfc32.dll”: 找不到指定的模块. (异常来自 HRESULT:0x8007007E).” 1.下载文件lib ...

  6. FIR滤波原理及verilog设计

    FIR(Finite Impulse Response)Filter:有限冲激响应滤波器,又称为非递归线性滤波器. FIR滤波器的冲击响应是一个值为滤波器抽头系数的采样序列,其脉冲响应由有限个采样值构 ...

  7. linux下编程epoll实现将GPS定位信息上报到服务器

    操作系统:CentOS 开发板:fl2440 开发模块:A7(GPS/GPRS),RT3070(无线网卡) ********************************************** ...

  8. File targeting 'AMD64' is not compatible with the project's target platform 'x86' 解决方法

     我在使用vs2010制作64位安装包时出现了以下问题: File targeting 'AMD64' is not compatible with the project's target plat ...

  9. ZMQ和MessagePack的简单使用(转)

    近段日子在做一个比较复杂的项目,其中用到了开源软件ZMQ和MessagePack.ZMQ对底层网络通信进行了封装,是一个消息处理队列库, 使用起来非常方便.MessagePack是一个基于二进制的对象 ...

  10. 如何在Windows版的ScaleIO的节点中添加磁盘

    嗯, 为什么会有这个问题呢? 因为我要安装ScaleIO 1.32, 在使用Installation manager完成初始安装之后, 需要将一些磁盘添加到ScaleIO的storage pool中. ...