03-browser-sync

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

开始安装：

1	npm install -g browser-sync

当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令:

1	npm install --save-dev browser-sync

静态网站

如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

1 2	// --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css"

如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"

// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"

1	browser-sync start --server --files "*/"

动态网站

如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。

1 2	// 主机名可以是ip或域名 browser-sync start --proxy "主机名" --files "css/*.css"

在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。

1	browser-sync start --proxy "Browsersync.cn" --files "css/* .css"

1	browser-sync start --proxy "Browsersync.cn" --files "*/"

一点建议，其实也是gulp+browser-sync方法的介绍，算是本文核心（我现在用的方法）

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    var files = [
    '**/*.html',
    '**/*.css',
    '**/*.js'
    ];
    browserSync.init(files,{
        server: {
            baseDir: "./"
        }
    });
});

// Domain server
//gulp.task('browser-sync', function() {
//    browserSync.init({
//        proxy: "yourlocal.dev"
//    });
//});
gulp.task('default',['browser-sync']); //定义默认任务

03-sass配置

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

本人于17年8月8日进行的测试。在使用 webpack + vue 的时候，webpack 的的配置文件中对于 vue 的配置，只需要在 module 中写： { text: /.vue$/, loader: ‘vue-loader’ } 即可，无需配置 option，在安装了 node-sass 和 sass-loader 2个包的情况下 .vue 的 style 写成，编译的时候会自动应用 sass-loader 进行编译。

只要安装安装 node-sass 和 sass-loader 就行

03-回退版本

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

1.show log

点击左上角的master，选择远程的master分支
右击需要回退到的目标点，选择 Reset “master” to this …
选择 Hard: Reset working tree and index (discard all local changes)
处理完后，可以看到master分支已经跟orgin/HEAD orgin/master不在一个点上了

6.远程回退版本

1	git push -f -u origin master（如果是别的分支名称就用别的名称，比如 prod dev）

03-编译

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

[Sass]命令编译,命令终端输入：

单文件编译：

1	sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：

1	sass sass/:css/

缺点及解决方法：
启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

1	sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

[Sass]GUI 界面工具编译

•Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
•CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

[Sass]自动化编译

grunt:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

gulp:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);

[Sass]常见的编译错误

在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。

03-过滤器

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

angularJs的过滤器:

currency 金额
number
lowercase/uppercase
json
limitTo
date
orderBy
filter

js中使用过滤器

1	$filter('filter')(array, expression, comparator)

扩展

angular.module //module.filter()

controller/run

filter

04-package.json与gulpfile.js

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

package.json

{
  "name": "website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.6",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.0.3",
    "gulp-copy": "^1.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.0.1",
    "gulp-useref": "^3.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulpfile.js

var gulp = require('gulp');	
var $ = require('gulp-load-plugins')();

var browserSync = require('browser-sync').create();

// 一步到位
gulp.task('useref', function() {
  return gulp.src('app/*.html')
 	// .pipe($.htmlmin({removeComments: true})) //这个不能放在useref之前
 	.pipe($.useref())
	.pipe($.if('*.js', $.uglify()))
	.pipe($.if('*.css', $.cleanCss({ compatibility: 'ie9' })))
	.pipe($.if('*.css', $.autoprefixer()))
	.pipe(gulp.dest('dist'));
});

// htmlmin
gulp.task('htmlmin',['useref'], function() {
    gulp.src('dist/*.html')
    .pipe($.htmlmin({removeComments: true}))
    .pipe(gulp.dest('dist'));
});

//压缩图片
gulp.task('imagemin', function(){
    gulp.src('app/img/**/*')
        .pipe($.imagemin())
        // .pipe($.cache($.imagemin()))
        .pipe(gulp.dest('dist/img'))
});

// 复制文件
gulp.task('copy', function() {
	gulp.src(['app/*','!app/*.html'])
	  	.pipe(gulp.dest('dist'))
});

// 删除
gulp.task('clean', function() {
	gulp.src('dist')
	  .pipe($.clean());
});

// 静态服务器
gulp.task('browser-sync', function() {
    var files = [
	    '**/*.html',
	    '**/*.css',
	    '**/*.js'
    ];
    browserSync.init(files,{
        server: {
            baseDir: "./"
        }
    });
});
// 监听
gulp.task('watch', ['browser-sync'], function() {
	gulp.watch(['app/*.html','app/**/*.js','app/**/*.css'], ['htmlmin']);
	gulp.watch(['app/*','!app/*.html'], ['copy']);
	gulp.watch(['app/img/**/*'],['imagemin']);
});

gulp.task('default',['htmlmin','imagemin','copy']);

04-指令

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

## 事件指令
- ng-click/dblclick
- ng-mousedown/up
- ng-mouseenter/leave
- ng-mousemove/over/out
- ng-mousemove/over/out
- ng-mousemove/over/out
- ng-mousemove/over/out
- ng-selected
- ng-change
- ng-copy
- ng-cut
- ng-cut

## angularJs的指令

- ng-disabled
    - 服务 $interval
- ng-readonly
- ng-checked
- ng-value

## 指令·显示优化
- ng-bind

对比:


- ng-bind-template
- ng-bind-html
    -需要引入 angular-sanitize.min.js 模块 
- ng-cloak : 通过css样式显示优化
- ng-non-bindable : 要显示{{}}

## 指令·原生扩展
> ng-attr-xx="{{值}}" 记得加{{}}
- ng-class
- ng-style
- ng-href
- ng-src
- ng-attr-xx

## 指令·显示隐藏
- ng-show
- ng-hide
- ng-if
- ng-switch
    - on
    - ng-switch-default
    - ng-switch-when
- ng-open

## 指令
- ng-init

$scope.arr=[[1,2],[3,4]]

- ng-include
- ng-include
    - ng-model-options
        -  updateOn
 
- ng-controller
    - as
    
## 标签指令

- a
- <select>
    - ng-options
        - for in


## 表单验证

- $valid
- $invalid
- $pristine
- $dirty
- $error
> name的方式进行查找 要写ng-model

- required 
- ng-minlength
- ng-maxlength
- ng-pattern

**class**
- .ng-valid{} 
- .ng-invalid{} 
- .ng-pristine{} 
- .ng-dirty{}

## 自定义指令

- angular.module
    - controller
    - run
    - filter
    - directive
        - restrict的四种定义方式:E A C M 区分大小写,可以自由组合
        - template
        - templateUrl // 需要在服务器环境,而且是相对与主html文件位置,而不是基于引入的js文件
        - replace
        - scope:{
			id:'@',
			data:'=',
            fn:'&'
		},
        - link: function (scope, iElement, iAttrs) {...}
        - transclude:分发
        - controller:{this.name=xxx}
        - require: ^ ?

04-监听路由变化

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

Vue 2.2 中引入的 beforeRouteUpdate 守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

don’t forget to call ==next()==

05-sublime配置

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

sublime配置

安装sass ,sass bulid(ctrl+b),sass beautify 插件
sass beautify按键绑定

[
    {
        "keys": ["alt+w"],
        "command": "sass_beautify"
    }
]

koala配置:解决中文编译问题

1.koala可视化编译工具，

找到安装目录里面sass-3.3.7模块下面的engine.rb文件，例如下面路径：

C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass

在这个文件里面==engine.rb==，添加一行代码

1	Encoding.default_external = Encoding.find('utf-8')

放在所有的require XXXX 之后即可。

05-vue

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

1. css

方案一：
- 一个公用的scss文件（包含变量和mixin，%），各个单文件引入这个公用scss文件（多次引入这个scss文件也不会多次生成重复样式）
- 另建一个公用的scss在~~主入口main.j~~s==App.vue==引入，然后在各个单文件里写样式，避免git冲突。
- 引入样式库后（比如mint-ui），style标签加入scoped属性后，并不能修改ui框架样式库，所以建议不加scoped方便样式库修改，利用sass嵌套保护作用域,所以父级的类名需要慎重，且父级最好加，避免vue-cli生成的时候样式被覆盖掉。
方案二(针对方案一build后css顺序相反问题)
- 按照必企后台之前的方案，一个公用的common.scss,里面一些mixin，%，变量，公用类（只要有复用，建议放在里面，做好注释，后面维护就清楚是否可以修改。）
- 新建两个scss文件，前端开发人员各一个，在common.scss里底部@import。
CSS样式库引入一个就好，多余的样式库带来样式的重置与覆盖，flexible只引入js，css不引入。多余样式库慎重引用。
如果采用flexible和mui结合，mui样式里的宽度和高度，字体大小到时需要修改。转px可以弄编辑器插件。加上<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
在单文件.vue里不需要写v-cloak,v-cloak只应用在多页面。 webpack打包之后是使用render函数去渲染出来。不用写双大括号\{\{\}\}

2. js

路由使用命名路由，方便维护。官网文档
生命周期：加载数据看实际情况，一般在 created 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted（用于dom操作）。
监听对象可利用 computed ，少用watch，节省性能。
v-model不能加过滤器，可用computed代替,或者把v-model改为:value

开始安装：

静态网站

动态网站

一点建议，其实也是gulp+browser-sync方法的介绍，算是本文核心（我现在用的方法）

只要安装 安装 node-sass 和 sass-loader 就行

[Sass]命令编译,命令终端输入：

[Sass]GUI 界面工具编译

[Sass]自动化编译

grunt:

gulp:

[Sass]常见的编译错误

angularJs的过滤器:

js中使用过滤器

扩展

package.json

gulpfile.js

Vue 2.2 中引入的 beforeRouteUpdate 守卫：

sublime配置

koala配置:解决中文编译问题

1. css

2. js

只要安装安装 node-sass 和 sass-loader 就行