frontend

frontend issue

npm淘宝镜像

http://npm.taobao.org/

echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npm.taobao.org/dist \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

一个gulp的脚手架

https://github.com/WINTR/gulp-frontend-scaffold

install

cnpm install -g gulp bower
git clone https://github.com/WINTR/gulp-frontend-scaffold.git && cd gulp-frontend-scaffold
cnpm install # 然而这个项目并不好用，里面有的东西无法安装了，我fork了一份重新装了一下
# https://github.com/duoduo369/gulp-frontend-scaffold,
# 由于有的时候npm bower会很慢，所以直接把bower npm装的东西丢到git了
cnpm cache clean -f
cnpm install -g n
n stable

用法看Readme有介绍, 大体贴两条

跟着文件学习

gulpfile.coffee

gulp           = require 'gulp'
requireDir     = require 'require-dir'
runSequence    = require 'run-sequence'

# Require individual tasks
requireDir './gulp/tasks', { recurse: true }

gulp.task "default", ["dev"]

gulp.task "dev", ->
  runSequence "set-development", [
    "copy-images"
    "bower"
    "stylesheets"
    "webpack"
  ], "server", "watch"

gulp.task "build", ->
  runSequence [
    "copy-images"
    "bower"
    "stylesheets"
    "webpack"
  ], "minify"

其中用到的东西, 只讲一次，因为各个task可能重复用了某些东西

requireDir将./gulp/tasks下的所有文件include到 了这个地方，所以下面的gulp.task可以直接用

gulp.task gulp的内置api，定义一个task，文档

runSequence按照特定顺序执行

gulp.tasks.copy-images

图片处理, 只处理有变化的或者新的图片，压缩，然后复制

gulp      = require 'gulp'
plugins   = require('gulp-load-plugins')()
config    = require "../config.coffee"

gulp.task "copy-images", ->

  gulp.src "#{config.sourcePath}/#{config.imagesDirectory}/**/*"
    .pipe plugins.plumber()
    .pipe plugins.newer("#{config.outputPath}/#{config.imagesDirectory}")
    .pipe plugins.imagemin
      optimizationLevel: 5
    .pipe gulp.dest "#{config.outputPath}/#{config.imagesDirectory}"

gulp-load-plugins: 便捷的require可以直接调用你package.json里面gulp-xxx的东西,比如下面其实是相等的

plugins.jshint = require('gulp-jshint');
plugins.concat = require('gulp-concat');

gulp.src gulp的内置api，是指你的源文件位置，文档

.pipe 文档,类似linux的管道

gulp-plumber: This monkey-patch plugin is fixing issue with Node Streams piping. For explanations, read this small article., 大体说node的pipe会出一些什么问题，出异常后会中断命令，这个是防止中断命令的.

gulp-newer: A Gulp plugin for passing through only those source files that are newer than corresponding destination files. 就是说只处理修改过的文件

gulp-imagemin: 跟名字一样，图片压缩

gulp.desc gulp的内置api，是指你的目标文件位置，文档

所以其实一般是gulp.src的源文件通过.pipe进行各种处理然后cp到gulp.desc的目标位置

gulp.tasks.bower

讲外部js压缩到一个js: 找到你安装会来的bower的主js，并且统统都丢到vendor.js上

gulp           = require 'gulp'
mainBowerFiles = require 'main-bower-files'
plugins        = require('gulp-load-plugins')()
config         = require "../config.coffee"

gulp.task "bower", ->
  gulp.src mainBowerFiles()
    .pipe plugins.concat("vendor.js")
    .pipe gulp.dest "#{config.outputPath}/#{config.jsDirectory}"

main-bower-files: 如果你用bower来装东西，他会把bower上的整个项目拿回来，项目里面会有一个bower.json他会告诉你真的你想用的js在哪里， 所以这个东西就是干这个的，注意，他貌似只找bower install --save中的东东--save-dev的不找

gulp-concat: Concatenates files, 连接文件

gulp.tasks.stylesheets

css的处理, 这个项目里面用的是styl，所以编译，添加一些浏览器兼容的东西，生成sourcemaps, 复制

gulp    = require 'gulp'
plugins = require('gulp-load-plugins')()
config  = require "../config.coffee"

gulp.task "stylesheets", ->
  gulp.src ["#{config.sourcePath}/#{config.cssDirectory}/#{config.cssMainFile}.styl"]
    .pipe plugins.plumber()
    .pipe plugins.stylus
      sourcemap:
        inline: config.development
    .pipe plugins.sourcemaps.init
      loadMaps: true
    .pipe plugins.autoprefixer()
    .pipe plugins.sourcemaps.write()
    .pipe gulp.dest "#{config.outputPath}/#{config.cssDirectory}"

  gulp.src ["#{config.sourcePath}/#{config.cssDirectory}/ie.styl"]
    .pipe plugins.plumber()
    .pipe plugins.stylus()
    .pipe plugins.autoprefixer()
    .pipe gulp.dest "#{config.outputPath}/#{config.cssDirectory}"

gulp-stylus:编译styl文件用的

gulp-sourcemaps生成sourcemaps的

gulp-autoprefixer: 最初没看懂但是看autoprefixer解释说是加浏览器兼容的一些东西的, 例如下面的代码

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

更新node 解决node的版本问题(主要是编译css时的问题)
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

http://stackoverflow.com/questions/32490328/gulp-autoprefixer-throwing-referenceerror-promise-is-not-defined
https://github.com/sindresorhus/gulp-autoprefixer/issues/45

gulp.tasks.webpack

打包源码js的看起来是，因为样式、图片、外部js之前两个task处理了

webpack = require 'webpack' gulp = require 'gulp' plugins = require('gulp-load-plugins')() config = require "../config.coffee"

gulp.task 'webpack', -> production = if config.production then '.production' else '' webpack require("../webpack.config#{production}"), (err, stats) -> throw new gutil.PluginError 'webpack', err if err plugins.util.log "[webpack]", stats.toString()

webpack.config.coffee webpack = require('webpack') config = require './config'

#--------------------------------------------------------
# Development Config
#--------------------------------------------------------

module.exports =
  cache: true
  entry: require './webpack.entries'
  output:
    path: "#{__dirname}/../#{config.outputPath}/#{config.jsDirectory}"
    filename: '[name].js'

  externals:
      "jquery": "jQuery"
      "$": "jQuery"

  module: loaders: [ 
    {
      test: /\.coffee$/
      loader: 'coffee-loader'
    }
  ]
  resolve:
    modulesDirectories: [
      'node_modules'
      'bower_components'
    ]
    extensions: [
      ''
      '.js'
      '.coffee'
      '.html'
    ]

webpack

gulp.tasks.server

一个node server方便调试

gulp    = require 'gulp'
plugins = require('gulp-load-plugins')()
config  = require "../config.coffee"

gulp.task "server", ->
   gulp.src config.publicPath
    .pipe plugins.webserver
      host: '0.0.0.0'
      port: 3000
      livereload: 22345

gulp-webserver: Streaming gulp plugin to run a local webserver with LiveReload, 就是起一个本地服务的

加了host 0.0.0.0 以及livereload不用他的默认配置，因为会出问题

Port 35729 is already in use by another process

https://github.com/toddmotto/fireshell/issues/39

gulp.tasks.watch

开发的时候文件变更马上编译 自动reload什么的

gulp      = require 'gulp'
plugins   = require('gulp-load-plugins')()
config    = require "../config.coffee"

#--------------------------------------------------------
# Watch for changes and reload
#--------------------------------------------------------

gulp.task "watch", ->
  gulp.watch "#{config.sourcePath}/#{config.cssDirectory}/**/*.{styl,sass,scss,css}", ["stylesheets"]
  gulp.watch "#{config.sourcePath}/#{config.imagesDirectory}/**/*", ["copy-images"]
  gulp.watch "#{config.sourcePath}/#{config.jsDirectory}/**/*.{coffee,js}", ["javascripts"]
  gulp.watch "bower.json", ["bower"]

  plugins.livereload.listen()

  gulp.watch "#{config.publicPath}/**/*", (e) ->
    plugins.livereload.changed(e.path)

  return

gulp.watch: 监控文件，并且在文件变化时执行哪些task

gulp-livereload: 修改后不用刷新浏览器自动加载

MAC升级Nodejs和Npm到最新版

https://www.jianshu.com/p/71c82fc63522

第一步，先查看本机node.js版本：

node -v

第二步，清除node.js的cache：

sudo npm cache clean -f

第三步，安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"

sudo npm install -g n

第四步，安装最新版本的node.js

sudo n stable

第五步，再次查看本机的node.js版本：

node -v

第六步，更新npm到最新版：

$ sudo npm install npm@latest -g

npm

淘宝源

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm init -y 初始化项目 npm i element-ui -S # i = install -S = --save-dev

vue

安装chrome开发者插件 vue-devtools

安装vue-cli npm install -g @vue/cli-service-global npm install -g @vue/cli

安装完会有一个提示, 类似
/usr/local/Cellar/node/0.12.0/bin/vue -> /usr/local/Cellar/node/0.12.0/lib/node_modules/@vue/cli/bin/vue.js

如果, mac zsh: command not found: vue
vim ~/.zshrc
export PATH="$PATH:/usr/local/Cellar/node/0.12.0/bin/"

创建项目

vue create 项目名称
vue add element 添加某插件
PreviouscssNextjs

Last updated