学习笔记《gulp》

gulp 的作者是 Eric Schoffstall,今年应该只有22岁,The DigitalOcean Team 两年前评选的《20 Developers To Follow In 2014》中对他的介绍是:

This twenty year old star is one of our favorite rising developers. Despite his age, he's already been a featured speaker at numerous community JS events, traveling around the world when taking a break from coding. He founded Fractal in 2010, which does huge amounts of open source and consulting, and has created over 150 projects in his spare time.

gulp 是 Laravel 默认绑定的前端的前端构建工具,类似于对于 webpack 这种解析工具的工程化封装,提供了这些功能:

  • gulp.src() 使用 Glob 方便的找到对应参数的所有匹配文件
  • gulp.dest() 对操作输出的目标地址进行定位,被 pipe 用户 stream 中的操作
  • gulp.task() 使用 Orchestrator 的机制定义的一些 task
  • gulp.watch() 对程序进行监控,一旦 CSS 或者 JS 被修改了,就进行自动构建

gulp 的安装:
npm install --global gulp-cli

然后会调用目录里面的 gulpfile.js 文件进行构建,命令是:
gulp

gulp 也支持插件的机制,目前官方有2600多个插件:
http://gulpjs.com/plugins/
github gulp首页上推荐的几个插件:

  • gulp-changed - only pass through changed files
  • gulp-cached - in-memory file cache, not for operation on sets of files
  • gulp-remember - pairs nicely with gulp-cached
  • gulp-newer - pass through newer source files only, supports many:1 source:dest

Laravel 中的使用

Laravel 在具体使用的时候,使用:

laravel-elixir
laravel-elixir-vue

两个包对 gulp 进行了封装:

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports common CSS and JavaScript pre-processors like Sass and Webpack. Using method chaining, Elixir allows you to fluently define your asset pipeline. For example:

elixir(function(mix) {
    mix.sass('app.scss')
       .webpack('app.js');
});

具体使用的时候可以学习这篇文章:《Run Gulp Tasks in Laravel Easily with Elixir》
还有官方文档: 《Compiling Assets (Laravel Elixir)》

你可能感兴趣的:(学习笔记《gulp》)