gulp相关知识(2)
将之前的东西的理论部分整理了一下——
gulp 前端构建工具 它可以帮助我们完成一些自动化操作
它需要一些插件的支持
var gulp = require('gulp'); --> gulp命令
require('yargs').argv;
它可以监听gulp后面添加的参数
关闭 gulp 服务器: 执行 ctrl + c
var less = require('gulp-less'); -->> less预处理器,目的就是把 .less文件转换成普通css文件
var header = require('gulp-header');
var minify = require('gulp-minify-css');
把css文件压缩
var autoprefixer = require('gulp-autoprefixer');
自动增加css3前缀
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
//这个插件就是同步刷新浏览器所会用到插件
var uglify = require('uglifyify');
var concat = require('gulp-concat');
//这个插件 作用 把A.JS b.JS c.JS 自动的合并成同一个js文件
gulp目录结构
根本目的:在于关注度分离
dist --> 网页发布到服务器所需要目录(只关心最后的发布环境)
src --> 开发者在开发时 所会使用到的目录(只关心开发环境)
node_modules --> 自动化工具所需要插件依赖集合文件
gulp 基础使用:
需要nodejs的支持
安装:
1. npm install -g gulp
2. npm install -save-dev gulp
若都安装成功, 你才可以直接运行 gulp命令
若都失败: node "node_modules\gulp\bin\gulp.js" --> gulp
假设你现在需要gulp中的less预处理器插件,首先你需要安装
npm install -save-dev gulp-less
装好之后,你需要引入它,执行
var less = require('gulp-less');
gulp执行环境有一个统一标准,都只能在gulpfile.js里执行
gulp里在组织中最核心的东西叫做 task
gulp gongyifeng
语法:
gulp.task("gongyifeng", function(){
console.log('gongyifeng')
})
gulp.task("task_one", function(){
console.log('task_one')
})
gulp.task("task_two", function(){
console.log('task_two')
})
gulp.task("task_three", ['task_one', 'task_two'], function(){
console.log('task_three')
})
gulp 它会执行一个默认任务名字 叫做 default
gulp.watch //gulp的监听操作,它可以监听文件的改变,之后完成一些事
语法:
gulp.watch('src/index.html', ['task_three']);
意思就是: 当发现src/index.html的内容发生改变是,执行task_three里面的内容
gulp里在设计中最核心的东西叫做流 (stream)
河流 所流向的位置 是 由 gulp.dest(c:/project) 所决定的
var option = {base: 'src'};
var dist = __dirname + '/dist';
在node.js环境下有一些特殊的变量,其中内部有一个变量:__dirname:
__dirname: 当前目录所在的位置 它现在等价于C:\techerFolder\gulp/
现在河流流向 C:\techerFolder\gulp/dist
当你需要让河流(文件流)流入到一个具体位置的时候, 你需要找到河流的发源地,那么通过什么去找呢?
答案是:
gulp.src(发源地)
pipe(流动)
gulp.dest('C:\techerFolder\gulp/dist') 流入的目的地
gulp.src -- > gulp里固有的方法--》找到河流发源地(文件流)
gulp.src('src/index.html').pipe()
gulp.src('src/example/**/*')
gulp.src('src/example/**/*.!(less)', option)
.pipe(gulp.dest(dist))
.pipe(browserSync.reload({stream: true}));
到这里 gulp经常被使用到语法就介绍完毕
现在我们讲解 gulp里 在前端领域里它的作用
我们可以用开源插件去辅助我们的前端开发
第一个gulp插件 --> gulp-concat 合并对应的文件,目的就是:
让我们能在开发环境中,很好的进行模块的划分;
gulp相关知识(2)的更多相关文章
- 构建工具-Gulp 相关知识
layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...
- gulp相关知识(1)
这是一种简单的工具,非常容易上手而且功能也是多种多样. 例如将整个网站打包下来的时候,看到的js代码总是混乱的,这就是类似于gulp的工具进行了加密,其他的功能还有很多这里就不赘述了. 首先是gulp ...
- 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- 移动WEB像素相关知识
了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
- UIViewController相关知识
title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...
- 【转】java NIO 相关知识
原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...
- NSString使用stringWithFormat拼接的相关知识
NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...
- iOS网络相关知识总结
iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...
随机推荐
- Chapter 16_0 面向对象编程
Lua中的table就是一种对象. 1.table和对象一样拥有状态 2.和对象一样有一个独立的标识符(a self) 3.和对象一样,具有独立于创建者和创建地的生命周期. 对象有他们自己的操作,ta ...
- ASP.NETwindows身份验证详细步骤-域验证登录
Windows身份验证相比于form身份验证要方便的多,而且会有更好的安全保障. 我个人觉得windows身份验证写法有两种: 第一种非代码方式进行windows身份验证: 第二种是用代码访问活动目录 ...
- 怎么查看window7的.net framework的版本
第一步.打开控制面板,在大图标查看方式下,点击“程序和功能” 第二步.在程序和功能界面,点击左侧“打开或关闭Windows功能” 第三步.在打开或关闭Windows功能界面,通过拖动滚动条的方式,找到 ...
- composer安装自己的包
composer的出现,使得PHPer可以像Java一样更加方便的管理代码.在composer没有出现之前,人们大多使用pear.pecl管理依赖,但是局限性很多,也很少有人用(接触的大多phper基 ...
- windows禅道环境搭建
zentao官网的几个网址 http://www.zentao.net/ http://www.zentao.net/article-view-79863.html 搭建环境需要下载两个文件 1) ...
- Python2中while 1比while True更快
1) bool类是从int类继承而来的 2) True/False 在python2中不是关键字,但是在python3是(True,False,None) PS > python2 Enthou ...
- CodeForces 754C Vladik and chat (DP+暴力)
题意:给定n个人的m个对话,问能不能找一个方式使得满足,上下楼层人名不同,并且自己不提及自己. 析:首先预处理每一层能有多少个user可选,dp[i][j] 表示第 i 层是不是可以选第 j 个use ...
- 用Visual Studio 2015 编写第一个UMDF驱动遇到的问题!!
前提:Visual Studio 2015已经成功安装了驱动环境,WDK都已经完全正常安装了,在Visual Studio 2015的菜单可以看到"Driver"菜单项了.这说明已 ...
- HttpWatch工具简介及使用技巧(转载)
一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...
- 如何利用Visual studio 2010创建一个ASP网站?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserLogin.aspx.c ...