01-入门指南

发表于 2018-05-03 | 分类于前端-09-gulp

全局安装 gulp：
1
$ npm install --global gulp
作为项目的开发依赖（devDependencies）安装：
1
$ npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

01-扩展运算符失效问题

发表于 2018-05-03 | 分类于前端-08-vue

想要使用…map啥啥啥的话，你需要transform-object-rest-spread。

npm装一个babel-plugin-transform-object-rest-spread，之后在package.json或其他调用babel的地方加上transform-object-rest-spread，类似这样：

"babel": {
    "presets": ["es2015"],
    "plugins": [ "transform-object-rest-spread"]
}

01-简介

发表于 2018-05-03 | 分类于前端-07-scss

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号( ; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass 和 CSS 写法有差别：

Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的

SCSS 和 CSS 写法无差别：

SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。==简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。==

01-组件样式

发表于 2018-05-03 | 分类于前端-12-微信小程序

1.组件样式

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

除此以外，组件可以指定它所在节点的默认样式，使用 :host 选择器（需要包含基础库 1.7.2 或更高版本的开发者工具支持）。

/* 组件 custom-component.wxss */
:host {
  color: yellow;
}

1 2	<!-- 页面的 WXML --> <custom-component>这段文本是黄色的</custom-component>

02-Ruby安装的坑

发表于 2018-05-03 | 分类于前端-07-scss

SASS与Compass的安装

SASS在Windows操作系统内依赖于Ruby环境，因此在安装SASS之前：

1、需要先安装Ruby。Ruby现阶段的安装与一般应用程序安装没有太大区别，环境变量等由安装程序自行设置。

2、Ruby环境内有个包管理器——GEM，它类似于Nodejs下的NPM，它随着Ruby一起被安装，因此不需要额外安装。

3、换RubyGems 镜像- Ruby China像

请尽可能用比较新的 RubyGems 版本，建议 2.6.x 以上。

1
2
3

$ gem update --system # 这里请翻墙一下
$ gem -v
2.6.3

$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org

如果遇到 SSL 证书问题，你又无法解决，请直接用 http://gems.ruby-china.org 避免 SSL 的问题。

4、请注意，务必先安装SASS，再安装Compass，并且后者对前者版本存在依赖，如果你安装的SASS不是Compass要求的版本，会导致Compass安装不成功。

5、scss更新

1	gem update sass

6、scss卸载

1	gem uninstall sass

参考:

http://blog.csdn.net/bluefish1990/article/details/21093349

02-webapck

发表于 2018-05-03 | 分类于前端-08-vue

CSDN博客链接

02-wepy使用sass配置

发表于 2018-05-03 | 分类于前端-12-微信小程序

link

wepy.confing.js 取消注释

1
2
3

sass: {
      outputStyle: 'compressed'
    },

安装 compilers

1 2	cnpm install node-sass -D npm install wepy-compiler-sass@1.3.12 --save

02-分支

发表于 2018-05-03 | 分类于前端-10-git

创建并新建分支

1 2	$ git checkout -b dev Switched to a new branch 'dev'

用git branch命令查看当前分支：

1
2
3

$ git branch
* dev
  master

切换回master分支：

1 2	$ git checkout master Switched to branch 'master'

把dev分支的工作成果合并到master分支上：

$ git merge dev
Updating d17efd8..fec145a
Fast-forward
 readme.txt |    1 +
 1 file changed, 1 insertion(+)

删除dev分支

1 2	$ git branch -d dev Deleted branch dev (was fec145a).

小结
Git鼓励大量使用分支：

查看分支：git branch

创建分支：git branch <name>

切换分支：git checkout <name>

创建+切换分支：git checkout -b <name>

合并某分支到当前分支：git merge <name>

删除分支：git branch -d <name>

最后记得推送

02-工具方法

发表于 2018-05-03 | 分类于前端-06-Angular

工具方法

angular.bind

描述：

上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。

使用方法：

1	angular.bind(self,fn,args );

angular.bootstrap

描述：

此方法用于手动加载angularjs模板
(官方翻译：注意基于端到端的测试不能使用此功能来引导手动加载，他们必须使用ngapp。 angularjs会检测这个模板是否被浏览器加载或者加载多次并且在控制台给出警告在加载其他模块的时候，这防止了奇怪的结果，在实际应用中，angularjs在尝试其它的多个实例来研究DOM)。

使用方法：

1	angular.bootstrap(element, [modules], [config]);

angular.copy

描述：

复制一个对象或者一个数组（好吧，万物皆对象，数组也是一个对象）。
如果省略了destination，一个新的对象或数组将会被创建出来；
如果提供了destination，则source对象中的所有元素和属性都会被复制到destination中；
如果source不是对象或数组（例如是null或undefined）, 则返回source；
如果source和destination类型不一致，则会抛出异常。
注意：这个是单纯复制覆盖，不是类似继承

使用方法：

1	angular.copy(source, [destination]);

返回值：

返回复制或更新后的对象

angular.element

描述：

包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.element只能接受HTML字符串或者DOM元素为参数，选择的元素只可以调用Angular中嵌入的精简版的jQuery library（名为: “jQuery lite” or “jqLite”).
注意: 所有被Angular引用的元素都是jQuery或者jqLite对象，不是原始的DOM元素了。

返回值：

jQuery对象或者jqLite对象

补充：

jqLite支持的jQuery函数有：

addClass()
append()
attr()
bind()
children()
clone()
contents()
css()
data()
detach()
empty()
eq()
find()
hasClass()
html()
next()
on()
off()
one()
parent()
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
triggerHandler()
unbind()
val()
wrap()

angular还提供了一下额外的方法和事情（有无jQuery都适用）
事件：

$destroy: 当jqLite/jQuery DOM对象被销毁是促发。

方法：

controller(name)
injector()
injector()
scope()
isolatescope()
inheriteddata()

angular.equals

描述：

比较两个值或者两个对象是不是相等。还支持值的类型，正则表达式和数组的比较。两个值或对象被认为是相等的前提条件是以下的情况至少能满足一项：

两个值或者对象能通过=== （恒等）的比较
两个值或者对象是同样类型，并且他们的属性都能通过angular.equals的比较
两个值都是NaN
两个值代表两个同样的正则表达式，例如angular.equals(‘/abc/‘, ‘/abc/‘)

使用方法：

1	angular.equals(o1, o2)

返回值：

boolean(如果相等返回True)

angular.forEach

描述：

循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦.

使用方法：

1	angular.forEach(obj, iterator, [context])

angular.fromJson

描述：

把Json字符串转为对象

使用方法：

1	angular.fromJson(json);

angular.toJson

描述：

把对象转为Json字符串

使用方法：

1	angular.toJson(obj, pretty);

angular.identity

描述：

返回它第一参数的函数. 此函数多用于函数是编程.

使用方法：

1	angular.identity(value);

返回值：

value

angular.extend

描述：

复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制.

使用方法：

1	angular.extend(dst, src);

返回值：

对dst的引用

angular.injector

描述：

创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.

使用方法：

1	angular.injector(modules, [strictDi])

返回值：

Injector对象

angular.lowercase

描述：

将指定的字符串转换为小写。

使用方法：

1	angular.lowercase(string);

angular.uppercase

描述：

将指定的字符串转换为大写。

使用方法：

1	angular.uppercase(string);

angular.isArray

angular.isDate

angular.isDefined

angular.isUndefined

angular.isFunction

angular.isNumber

angular.isObject

angular.isString

angular.isElement

…

02-核心方法

发表于 2018-05-03 | 分类于前端-09-gulp

gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

options.base

类型： String 默认值：将会加在 glob 之前 (请看 glob2base)

如, 请想像一下在一个路径为 client/js/somedir 的目录中，有一个文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。++如果某文件夹不存在，将会自动创建它++。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

path

类型： String or Function

文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例来提供。

gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务（task）。

1
2
3

gulp.task('somename', function() {
  // 做一些事
});

name

任务的名字，如果你需要在命令行中运行你的某些任务，那么，==请不要在名字中使用空格==。

注意：你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn

该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

异步任务支持

任务可以异步执行，如果 fn 能做到以下其中一点：

接受一个 callback

// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

返回一个 stream

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

返回一个 promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

注意：默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：

给出一个提示，来告知 task 什么时候执行完毕，
并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

我们先假定你有两个 task，”one” 和 “two”，并且你希望它们按照这个顺序执行：
在 “one” 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。

在 “two” 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

因此，这个例子的实际代码将会是这样：

var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

gulp.watch(glob[, opts], tasks)