一个后端的前端学习之旅——2.先搞定gulp

这是个人小本本的笔记，先列出了dev中用到的东西，blog可能写了就懒得懂了，可是小本本是随时更新的 小本本位置

一个gulp的脚手架

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

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

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有介绍, 大致贴两条

• For development: gulp dev then navigate to http://localhost:3000 (or IP address).
• For deploy: gulp build

跟着文件学习

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: 修改后不用刷新浏览器自动加载