Introduction to Gulp.js
Tutorial
These are the files for my series Introduction to Gulp.js published on my website stefanimhoff.de.
Tutorial Overview
- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Bundling JavaScript with Browserify
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Checking the Syntax of SCSS and JavaScript
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Optimize CSS, JavaScript, Images and HTML
- Revisioning
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
- PostCSS
Preparation
Install nvm and node:
$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ cd ~/.nvm
$ git checkout `git describe --abbrev=0 --tags`
$ export NVM_DIR="$HOME/.nvm/"
$ [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
nvm install 6.3.1
If you like install yarn, I provide a yarn.lock file:
brew install yarn
Install bundler:
$ gem install bundler
Install bower:
$ npm install -g bower
Installation
Clone the repository on your computer and change into the projects folder. Run:
$ bundle
$ bower install
$ npm install
To install Fontcustom you should have Homebrew installed or use another package management tool to install the dependencies:
$ brew install fontforge --with-python
$ brew install eot-utils
Setup
Open gulp/config.js and change settings if needed. Only the rsync settings need to be adjusted. Change the destination to a path on your webserver and change hostname and username.
Running Gulp.js
Three tasks are available (npm works, too):
$ yarn start
$ yarn run publish
$ yarn run deploy
- Running
yarn startwill start a development server, build assets and the Jekyll site and start awatchtask. - Running
yarn run publishwill copy and optimize assets and run a production build of Jekyll. - Running
yarn run deploywill copy the generated files with Rsync to your server.
Sass, Compass or PostCSS
The current version of this tutorial uses PostCSS. If you would like to use Sass (or Compass), you can still easily access the old code in the branch ruby-sass. The new code at the time I wrote the article is available in the branch postcss. Additionally I merge it into master and will process with PostCSS in my tutorial.
Credits
This tutorial includes some files for demonstation purposes:
- The Gulp.js logo used as image example
- The pattern Light gray by Brenda Lay, published on Subtle Patterns
- The SVGs and PNGs are take from the IcoMoon Icon Pack.
-
gulp 解决项目做好以后的一些事情： 压缩图片 压缩js 压缩css 编译sass 合并文件… 人为效率低，所以学习gulp 不止有gulp这一种工具,Grunt(跟不上时代),Webpack（暂时不学） 中文网址： https://www.gulpjs.com.cn/docs/getting-started/quick-start/ 安装： npm i gulp -g 检测： gulp --
-
typora-root-url: images typora-copy-images-to: images 第一节： wabpack 工作应用 最近做项目，因为每次做完后都要手动压缩CSS、JS 等文件，压缩后另存为 *.min.xxx。 Less 还要手动输入命令进行编译，调整页面也经常要手动刷新页面看效果，很麻烦，就尝试用 gulp 去处理这些文件，让事情变得更加简单可靠。 自动化编程 介绍
-
babel gulp ECMAScript 6 (a.k.a ECMAScript 2015 or ES6), the specification for next version of JavaScript has been approved and browser vendors are hard at work implementing it. Unlike the previous ver
-
Tired of having to refresh your browser every single time you make changes to your LESS/SASS/CSS files? This article will take you step-by-step to getting LiveReload integrated in your development env
-
一、安装流程 1、安装 nodejs(请参考http://www.runoob.com/nodejs/nodejs-install-setup.html) (关于 nodejs 的知识可以去 http://nodejs.cn/ 或者 [w3c]http://www.runoob.com/nodejs/nodejs-tutorial.html 了解) 检查 nodejs 以及 npm 是否安装成功
-
最近接触的一个项目中使用了React为主要框架，虽然之前也多多少少学过一些React,但是还需要更深入的学习和更熟练的掌握，所以最近我打算好好的读上几本React的书，今天带来第一本书：《react-tutorial》的学习总结。 前言 技术在没有真正使用之前，没法评价哪一个好，没有最好的，只有最合适的。 一 Webpack 配置 React 开发环境 搭建一个现代的前端开发环境配套的工具有很多，
-
《一》、使用gulp构建React应用 一、React项目结构 .gulpfile.js ./src .index.html /js .App.js .Child.js .Parent.js 二、代码 index.html 和 js目录下的三个jsx文件如下 //index.html <!DOCTYPE html> <html> <h
-
按照 http://t.laravel-china.org/laravel-tutorial/5.1/3.2 教程, 当执行> gulp 命令时出错. Laravel 执行 Gulp 命令出错: E:\Laravel\FirstLaravel>gulp [10:27:34] Using gulpfile E:\Laravel\FirstLaravel\gulpfile.js [10:27:34]
-
gulp4.0.2 Despite competition from webpack and Parcel, Gulp.js remains one of the most popular JavaScript task runners. Gulp.js is configured using code which makes it a versatile, general-purpose opt
-
这篇快速上手指南将教你如何使用Gulp构建TypeScript，和如何在Gulp管道里添加Browserify，uglify或Watchify。 本指南还会展示如何使用Babelify来添加Babel的功能。 这里假设你已经在使用Node.js和npm了。 我们首先创建一个新目录。 命名为proj，也可以使用任何你喜欢的名字。 mkdir proj cd proj 我们将以下面的结构开始我们的工程
-
更改历史 * 2017-11-12 杨海月 增加xxx内容，更改xxx内容，删除xxx内容 * 2017-11-01 胡小根 初始化文档 第一章 历史、现状及发展 1.1 gulp历史 gulp是前端开发过程中一种基于流的 代码构建工具 ，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可
-
问题内容： 我想遍历一个对象，并在每次迭代时将文件路径数组传递给gulp.src，然后对这些文件进行一些处理。下面的代码仅用于说明目的，因为return语句会在第一次通过时终止循环，因此实际上将无法工作。 这是基本思想。有关如何执行此操作的任何想法？ 问题答案： 我能够使用合并流实现这一目标。如果有人感兴趣，这里是代码。这个想法是在循环内创建一个流数组，并在完成迭代后合并它们：
-
我安装了gulp，但我不能使用“gulp”命令，因为它会给我“-bash：gulp：command not found”错误。当我使用“NPX GULP”，然后它的工作，但我不知道为什么。
-
gulp-concat:文件合并 gulp-connect：在本地开启一个websocket服务，使用liveReload实现实时更新 gulp-watch：监听文件的变化，配合connect实现服务自动刷新 gulp-plumber：实时更新错误不会导致终端gulp运行开启的服务断开 gulp-livereload:即时重整 gulp-clean:清理档案 gulp-load-plugins：自
-
gulp-load-plugins Automatically load any gulp plugins in your package.json Install $ npm install --save-dev gulp-load-plugins Given a package.json file that has some dependencies within: { "depen
-
Glup 简明使用教程 安装： $ npm install gulp -g $ npm install gulp --save-dev 安装gulp插件 编译Sass(gulp-sass) (gulp-ruby-sass) 编译Less(gulp-less) Autoprefixer (gulp-autoprefixer) 缩小化(minify)CSS (gulp-minify-css) JSH
-
支援 Gulp 4.0，允许嵌套配置任务及组态。以优雅、直觉的方式，重复使用 gulp 任务。 编码的时候你遵守 DRY 原则，那编写 gulpfile.js 的时候，为什么不呢？ 功能 支援 Gulp 4.0， 自动载入本地 recipe， 支援透过 npm 安装 plugin， 支援嵌套任务并且允许子任务继承组态配置， 支援向前、向后参照任务， 透过组态配置即可处理串流：譬如 merge, q