发表于 | 分类于

This post is all about issues come up when I use gulpjs.

Multiple gulp process flow working with runing tasks in sequence demand.

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    gulp.task('someTask', function(){
        if (gulpConfig.multi-dist){
            const stream = merge();
            _.forEach(gulpConfig.branches, function (name) {
                stream.add(
                gulp.src('biz/*.html')
                    .pipe(gulp-plumber(errorHandler))
                    .pipe(gulp-newer('./dest/' + name))
                    .pipe(gulp.dest('./dest/' + name))
                );
            })
            return stream;
        }
    });

  • By doing this, now can run this multiple working flow with other tasks in sequence.

alter gulp dest path through gulp-rename

1
srcPath = path.join(component, '*', 'lib/**/*')
1
2
3
4
5
6
7
8
9
10
11
12
function getJsStream(srcPath, distPath){
	return gulp.src(srcPath)
		.pipe(gulp-plumber(errorHandler))
		// .pipe(gulp-logger({showChange: true}))
		.pipe(rename(function(file) {
			var pathArr = file.dirname.split(path.sep);
			pathArr.splice(1,1); //切掉lib
			file.dirname = pathArr.join(path.sep);
		}))
		.pipe(gulp-newer(distPath))
		.pipe(gulp.dest(distPath));
}

发表于

babel preset

  • Presets are sharable .babelrc configs or simply an array of babel plugins.
  • Babel-preset-env replaces es2015, es2016, es2017, latest
  • With most of the new feature covered usually will use “stage-2”(Stage 2 - Draft: initial spec.)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2" // why ???
      ]
    }

e2e test

  • npm i的时候chromedriver下载失败, 可通过配置解决
    1
    npm config set  chromedriver_cdnurl  "https://npm.taobao.org/mirrors/chromedriver"

Fixing Linting Errors

npm run lint -- --fix
(The – in the middle is necessary to ensure the –fix option is passdd to eslint, not to npm)

Asset Resolving Rules

  • Root-relative URLs, e.g. /assets/logo.png are not processed at all.
  • Relative url will be interpreted as a module dependency.

    “Real” Static Assets

    In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename.

Any file placed in static/ should be referenced using the absolute URL /static/[filename].

favicon locate

1
2
3
4
5
6
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

保留滚动位置,scrollBehavior

1
2
3
4
5
6
7
8
9
10
11
export default new Router({
  routes,
  mode: routerMode,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition && to.meta.keepAlive) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

入口路由两种方式

  1. app组件做根路由
    1
    2
    3
    4
    5
    6
    7
    //main.js
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    });
1
2
3
4
5
6
7
// App.vue
<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>
  1. 根路由放到index.html上
    1
    2
    3
    4
    5
    //main.js
    new Vue({
    	router,
    	store,
    }).$mount('#app')
1
2
3
4
//index.html
<div id="app">
  <router-view></router-view>
</div>

resolve in webpack configuration

The resolver helps webpack find the module code that needs to be included in the bundle for every such require/import statement.

Configure how modules are resolved. For example, when calling import “lodash” in ES2015, the resolve options can change where webpack goes to look for “lodash”.

发表于 | 分类于

vue测试模块

vue-cli生成项目有unit和E2E测试模块. 以及项目构建的脚手架

测试脚本

1
2
3
4
5
6
"scripts": {
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  }
阅读全文 »

发表于 | 分类于

开发脚本dev-server.js

The compiler object represents the fully configured Webpack environment. This object is built once upon starting Webpack, and is configured with all operational settings including options, loaders, and plugins.
A compilation object represents a single build of versioned assets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var config = require('../config')
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) // "development"
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf') 
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
    // Define HTTP proxies to your custom API backend
    // https://github.com/chimurai/http-proxy-middleware
var server = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, { // 将打包后文件放内存
    publicPath: webpackConfig.output.publicPath, //和webpack的output的一样
    stats: {
        colors: true,
        chunks: false
    }
})
var hotMiddleware = require('webpack-hot-middleware')(compiler) //热重载
    // force page reload when html-webpack-plugin template changes
    //While running Webpack development middleware, a new compilation will be created each time a file change is detected, thus generating a new set of compiled assets.
compiler.plugin('compilation', function(compilation) { // webpack在compile时的回调
    //The Compiler has emitted all assets.
    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) { //文件由webpack生成后 
        hotMiddleware.publish({
            action: 'reload'
        })
        cb()
    })
})
var context = config.dev.context
var proxypath = config.dev.proxypath
var options = {
    target: proxypath,
    changeOrigin: true,
}
if (context.length) {
    server.use(proxyMiddleware(context, options))
}
server.use(proxyMiddleware('/payapi', {
    target: 'https://pay.ele.me',
    changeOrigin: true,
}))
server.use(proxyMiddleware('/m.ele.me@json', {
    target: 'https://crayfish.elemecdn.com',
    changeOrigin: true,
}))
// handle fallback for HTML5 history API
server.use(require('connect-history-api-fallback')())
serve webpack bundle output
server.use(devMiddleware)
enable hot-reload and state-preserving
compilation error display
server.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
server.use(staticPath, express.static('./static'))
module.exports = server.listen(port, function(err) {
    if (err) {
        console.log(err)
        return
    }
    var uri = 'http://localhost:' + port
    console.log('Listening at ' + uri + '\n')
    // when env is testing, don't need open it
    if (process.env.NODE_ENV !== 'testing') {
        opn(uri)
    }
})

webpack1->webpack2迁移文档

https://webpack.js.org/guides/migrating/

发表于 | 分类于

测试套餐 - testing suites

the 4 major classifications of testing software are:

  1. Test Runners => karma ava
  2. Testing Frameworks => jasmine mocha
  3. Assertion Libraries => chai
  4. Testing Plugins => sinon
阅读全文 »

发表于 | 分类于 ， ，

react路由参数获取

1
<Route path="/books/:id" component={BooksList}/>
1
2
3
4
render() {
    console.log(this.props.params.id);
//...
}

react路由Histories

  • browserHistory(推荐使用)
    • 缺点, 超链接在新标签打开报错,要从根路径开始
    • 优点, 地址栏不会出现#, 组件加载不会渲染两次
  • hashHistory
    • 缺点, 组件加载会渲染两次
    • 优点, 兼容老版本浏览器
  • createMemoryHistory(服务器端渲染使用)

组件内外跳转

  • 内跳转

    1
    2
    3
    4
    5
    componentDidMount(){
        setTimeout(()=>{
            this.context.router.push('/home');
        },3000);
    }

  • 外跳转

1
2
3
4
5
6
7
8
9
10
//在引入的service里通过browserHistory来跳转
    
export default{
    getData() {
        setTimeout(()=>{
            browserHistory.push('/home')
        },3000)
    },
 //...
}

发表于 | 分类于 ，

Meta标签介绍

meta 的属性有两种：name和http-equiv。 name属性主要用于描述网页，对应于content（网页内容）

  1. 用以说明生成工具（如Microsoft FrontPage 4.0）等；
  2. 向搜索引擎说明你的网页的关键词；
  3. 告诉搜索引擎你的站点的主要内容；
  4. 告诉搜索引擎你的站点的制作的作者；

其中的属性说明如下：

  • 设定为all：文件将被检索，且页面上的链接可以被查询；
  • 设定为none：文件将不被检索，且页面上的链接不可以被查询；
  • 设定为index：文件将被检索；
  • 设定为follow：页面上的链接可以被查询；
  • 设定为noindex：文件将不被检索，但页面上的链接可以被查询；
  • 设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

1
2
<meta http-equiv="Content-Type"   contect="text/html";     charset=gb_2312"> 
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

发表于 | 分类于

less overview

variables

  • Variables
1
2
3
4
5
6
7
8
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@bd-bold : 4px solid @nice-blue;
#header {
  color: @light-blue;
  border: @bd-bold
}

output 

1
2
3
#header {
  color: #6c94be;
}
  • mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

  • Nested Rules (tlnr)

  • Nested Directives and Bubbling

Directives such as media or keyframe can be nested in the same way as selectors.
Directive is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.

1
2
3
4
5
6
7
8
9
10
11
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

mixin在引用时可以不加卡号,.mix;

reference