gulp入门详解之基本操作

文章结构

本文分为两部分：

gulp 入门

gulp 常用插件

gulp入门

简单介绍

首先来简单看一个gulp的工作流程
工作流的目的是：将less转换成为一个对应的css文件。

对应项目的下载地址：点击下载

运行环境

node (本文的版本是v6.9.5)

包管理：npm(或者cnpm) 不了解的同学可以参考一下：链接内容

安装gulp环境

npm install gulp -g

全局安装gulp,安装完成之后，可以通过 gulp -v 指令查看当前版本(v3.9.1)

开发流程

创建 package.json

创建并编写 gulpfile.js

命令行执行gulp

创建 package.json
通过我们之前配置好的npm，我们执行npm install来创建一个package.json文件。文件格式如下：

{"name": "gulp", // 包名称"version": "1.0.0", // 版本号"description": "", // 文件描述"main": "gulpfile.js", // 入口文件"dependencies": { // !!! 文件的依赖，当前为空},"devDependencies": {}, // 开发版本依赖"scripts": { // "test": "echo \"Error: no test specified\" && exit 1"},"author": "", // "license": "ISC" //
}

我们可以看到，当前项目的依赖包（dependencies）列表为空。
本例我们需要做一个less=>css的转换，因此需要使用gulp以及gulp-less这两个插件包。
在命令行中，执行npm install gulp-less，我们再去看看dependencies依赖项目中会多了一个新包。

"dependencies": {"gulp": "^3.9.1"},

创建并编写 gulpfile.js

新建一个gulpfile文件，作为自动化项目构建任务。

./src/index.less

@color: #4D926F;#header {color: @color;
}
h2 {color: @color;
}

./gulpfile.js

let gulp = require('gulp')
let less = require('gulp-less')// 自定义任务
gulp.task('testless',function(){gulp.src('src/index.less') // 匹配特定文件// gulp.src('src/*.less') //  匹配固定目录下.less文件// gulp.src('./src/**/*.less') // 匹配固定目录下，所有子文件夹下的.less文件// gulp.src('./src/**/{index,other.index}.less') // 匹配固定目录下，特定文件名的.less.pipe(less()).pipe(gulp.dest('src/css'))
})
// 执行任务
gulp.task('default',['testless'])

命令行执行gulp

在命令行中执行gulp或gulp-less这两种指令。
最后可以看到,新增加了./src/css/文件夹

gulp入门详解之基本操作相关推荐

linux 日志按大小切割_nginx入门详解（六）- 日志切割
上一章讲解了nginx的目录加密功能,本章重点介绍nginx的日志切割. 笨办法学linux:nginx入门详解(五)- 目录加密zhuanlan.zhihu.com 在第二章,我们探讨了nginx ...
python怎么安装myqr模块-python二维码操作:对QRCode和MyQR入门详解
python是所有编程语言中模块最丰富的生活中常见的二维码功能在使用python第三方库来生成十分容易三个大矩形是定位图案,用于标记二维码的大小.这三个定位图案有白边,通过这三个矩形就可以标识一个 ...
python语言编程基础-Python语言入门详解！快速学成Python！
原标题:Python语言入门详解!快速学成Python! 很多技能是被职场所需要的,但很可惜... 这些技能在大学中并学习不到. 大学和职场现实存在的横沟对大部分同学来说难以跨越或碰得头破血流... ...
python语言入门m-Python语言入门详解！快速学成Python！
今日主题 "Python语言入门详解" 近两年来,Python语言借着数据科学和人工智能的"东风"成为了最流行的编程语言--街头巷尾人们口口相传.同时,Pyth ...
python语言入门详解-python初级教程：入门详解
python初级教程:入门详解 Crifan Li 目录前言 .................................................................... ...
【GCN】图卷积网络（GCN）入门详解
机器学习算法与自然语言处理出品 @公众号原创专栏作者 Don.hub 单位 | 京东算法工程师学校 | 帝国理工大学图卷积网络(GCN)入门详解什么是GCN GCN 概述模型定义数学推导 G ...
python符号格式化设置区间_Python 数值区间处理_对interval 库的快速入门详解
使用 Python 进行数据处理的时候,常常会遇到判断一个数是否在一个区间内的操作.我们可以使用 if else 进行判断,但是,既然使用了 Python,那我们当然是想找一下有没有现成的轮子可以用. ...
【JSON】JSON入门详解(二)
文章目录 JSON基础文章荐读 JavaScript创建JSON对象 JSON与XML的那些事 JSON与XML的相同之处 JSON与XML的不同之处 AJAX相关JSON与XML JSON与XML的 ...
python怎么安装myqr_python二维码操作:对QRCode和MyQR入门详解
python是所有编程语言中模块最丰富的生活中常见的二维码功能在使用python第三方库来生成十分容易三个大矩形是定位图案,用于标记二维码的大小.这三个定位图案有白边,通过这三个矩形就可以标识一个 ...

gulp入门详解之基本操作

文章结构

gulp入门

简单介绍

运行环境

安装gulp环境

开发流程

gulp入门详解之基本操作相关推荐

最新文章

热门文章