一個後端的前端學習之旅——2.先搞定gulp

時間  2019-11-11
標籤 一個 後端 前端 學習 之旅 先搞 gulp 欄目 JavaScript 简体版
原文   原文鏈接

這是個人小本本的筆記，先列出了dev中用到的東西，blog可能寫了就懶得懂了，可是小本本是隨時更新的 小本本位置javascript

一個gulp的腳手架

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

npm淘寶鏡像

http://npm.taobao.org/html

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有介紹, 大致貼兩條java

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

跟着文件學習node

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可能重複用了某些東西jquery

requireDir將./gulp/tasks下的全部文件include到 了這個地方，因此下面的gulp.task能夠直接用linux

gulp.task gulp的內置api，定義一個task，文檔webpack

runSequence按照特定順序執行git

gulp.tasks.copy-images

圖片處理, 只處理有變化的或者新的圖片，壓縮，而後複製github

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: 修改後不用刷新瀏覽器自動加載

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程