Day 8 - Web開發環境設定黨(二)

gulp
laravel elixir

---

gulpfile.js

五大優點

• 使用gulp.js，你的構建腳本是代碼，而不是配置文件；
• 使用標準庫（node.js standard library）來編寫腳本；
• 插件都很簡單，只負責完成一件事－基本上都是20行左右的函數；
• 任務都以最大的並發數來執行；
• 輸入／輸出（I/O）是基於流式的;

參閱：
http://xialeizhou.com/2016/02/03/gulp%E5%92%8Cgrunt%E5%AF%B9%E6%AF%94/#more

gulp -T: 查任務

task : 開啟任務
src：連接路徑
pipe： 管道

• gulp-stylelint : 檢查編碼格式 stylelint
• vinyl-buffer ：接收Vinyl File Object作為輸入，然後判斷其contents類型，如果是Stream就轉換為Buffer

參閱 ：
探究Gulp的Stream
https://segmentfault.com/a/1190000003770541
Gulp 初體驗
http://andyyou.logdown.com/posts/178360-gulp-first-experience
Gulp-自動化的好幫手
http://fireqqtw.logdown.com/posts/249086-good-helper-of-gulp-automation
gulp 學習筆記
https://kejyuntw.gitbooks.io/gulp-learning-notes/content/
CP 值很高的 Gulp
https://www.slideshare.net/yvonne_yu/cp-gulp
Gulp筆記：安裝、撰寫Task、監看、例外錯誤處理和套件使用
http://cythilya.blogspot.tw/2016/08/gulp.html

---

Laravel Elixir

//laravel5.3 原生
const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

//客制引入
const gulp = require('gulp');
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const spritesmith = require('gulp.spritesmith');
const imagemin = require('gulp-imagemin');
const glob = require('glob');
const fs = require("fs");
const hashFiles = require('hash-files');

const config = {
    bowerDir: './vendor/bower_components',
    npmDir: './node_modules',
};

/**
 * Gulp 任務區
 */

//執行 webpack
gulp.task('webpack', function(callback) {
    var webpackConfigObject = Object.create(webpackConfig);

    webpack(webpackConfigObject, function (err, stats) {
        callback();
    });
});

//檢查編碼格式 stylelint
gulp.task('lint-css', function lintCssTask() {
    var gulpStylelint = require('gulp-stylelint');

    return gulp
        .src(elixir.config.get('assets.css.sass.folder') + '/**/*.scss')
        .pipe(gulpStylelint({
            syntax: 'scss',
            failAfterError: true,
            reporters: [
                {formatter: 'string', console: true}
            ]
        }));
});

//處理小圖
gulp.task('csssprite', function(callback) {
    /*
    會用到 glob, fs, hashFiles, spritesmith, vinyl-buffer, imagemin
     */
});    

---

Laravel Elixer

設定黨路徑 ： node_modules/laravel-elixir/dist/Congig.js

elixir.config.assetsPath = 'resources/';
elixir.config.css.autoprefix = {
    enabled: true,
    options: {
        cascade: true,
        browsers: ['last 6 versions', '> 1%']
    }
};

參閱
gulp教程之gulp-autoprefixer
http://www.ydcss.com/archives/94

mix.webpack：方法用於將ECMAScript 2015編譯打包成原生JavaScript
mix.combine：合併多個已經最小化的vendor庫文件
mix.version：方法接收相對於 public 目錄的文件名，附加唯一hash到文件名，從而實現緩存刷新

參數介紹：
http://laravelacademy.org/post/5962.html

elixir((mix) => {

    //css 可用 less, sass, stylus, 或只做原生css合併

    //js
    mix.webpack('all.js', './public/js/page/all.js', 'public/js/page/')
        .webpack('home.js', './public/js/page/home.js', 'public/js/page/')
        .webpack('admin.js', './public/js/page/admin.js', 'public/js/page/')
        .webpack('profile.js', './public/js/page/profile.js', 'public/js/page/')
        .webpack('test.js', './public/js/page/test.js', 'public/js/page/');

    //插件最小min.js合併
    mix.combine([
                'jquery/dist/jquery.min.js',
                'bootstrap/dist/js/bootstrap.min.js',
                'jquery-validation/dist/jquery.validate.min.js',
                'autosize/dist/autosize.min.js',
                'layzr.js/dist/layzr.min.js'
            ], 'public/js/vendor.js', config.bowerDir);

    //script 可以寫腳本做合併

    //copy 拷貝文件/目錄

    //版本號
    mix.version([
        'public/css/page/all.css',
        'public/css/page/home.css',
        'public/css/page/admin.css',
        'public/css/page/profile.css',
        'public/css/page/test.css',
        'public/js/page/all.js',
        'public/js/page/home.js',
        'public/js/page/admin.js',
        'public/js/page/profile.js',
        'public/js/page/test.js',
        'public/js/vendor.js'
    ]);

});

參閱：
Laravel 5.3 文檔] JavaScript & CSS —— 編譯資源（Laravel Elixir）
http://laravelacademy.org/post/5962.html
使用 Elixir 合併 CSS 與 JS
https://kejyuntw.gitbooks.io/laravel-5-learning-notes/services/elixir/services-elixir-combine-css-and-js.html


＃gulp已成功
＃好像知道該怎麼用了
＃似乎也就用Laravel的就好
＃該先練習其他的
＃這塊先暫時這樣