将之前的东西的理论部分整理了一下——

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)的更多相关文章

  1. 构建工具-Gulp 相关知识

    layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...

  2. gulp相关知识(1)

    这是一种简单的工具,非常容易上手而且功能也是多种多样. 例如将整个网站打包下来的时候,看到的js代码总是混乱的,这就是类似于gulp的工具进行了加密,其他的功能还有很多这里就不赘述了. 首先是gulp ...

  3. 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  4. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  5. listener监听器的相关知识

    从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...

  6. UIViewController相关知识

    title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...

  7. 【转】java NIO 相关知识

    原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...

  8. NSString使用stringWithFormat拼接的相关知识

    NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...

  9. iOS网络相关知识总结

    iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...

随机推荐

  1. LeetCode OJ 74. Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  2. Gentoo解决Udev升级的网卡重命名问题

    问题描述: 配置网络时,很多新手运行ifconfig命令查看网卡时,会发现我们熟悉的eth0网卡没有了,或是发现一些不规则命名的东东,不错,那就是你的网卡. 因为内核升级(忘记具体哪个版本了)从ude ...

  3. Openjudge-计算概论(A)-短信计费

    描述: 用手机发短信,一条短信资费为0.1元,但限定一条短信的内容在70个字以内(包括70个字).如果你一次所发送的短信超过了70个字,则会按照每70个字一条短信的限制把它分割成多条短信发送.假设已经 ...

  4. aforge之hough

    /// <summary> /// 参数不能是一位索引 /// </summary> /// <param name="bmp"></pa ...

  5. solr定时增量索引

    当数据库的数据发生改变的时候,我们不想手动的去重新添加数据库的数据导solr索引库中,所以用到定时添加索引.增删改的数据.现在写的这些都是基于我之前做的一步步到这来的. 将solr/dist下的sol ...

  6. manifest中的largeHeap是干什么用的?

    转 http://blog.csdn.net/jiaoyang623/article/details/8773445 今天群里有人讨论怎么给app分配超过100M的内存,有人亮出了largeHeap参 ...

  7. linux 内核协议栈收报流程(二)Netfilter全貌

    ip层分片整理 int ip_local_deliver(struct sk_buff *skb){ /* * Reassemble IP fragments. */ if (ip_is_fragme ...

  8. 1.0 Python 学习网站

    w3cschool : http://www.runoob.com/python/python-tutorial.html cnblog Python 从入门到精通:  http://www.cnbl ...

  9. VBS自编写脚本。(实现批量修改文件名且在执行前,备份原有文件夹中的文件)

    '=========================================================================='' VBScript Source File - ...

  10. hdu_5791_Two(DP)

    题目链接:hdu_5791_Two 题意: 给你两串数列,问你相同的子序列有多少个,要注意,可以重复,比如1 和1 1 1 ,相同的子序列为3个 题解: 就和求最长公共子序列差不多,只不过要全部加起来 ...