-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
138 lines (88 loc) · 4.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Using Gulp.js for CSS tasks</title>
<link rel="stylesheet" media="all" href="build/css/main.css">
</head>
<body>
<header>
<picture>
<source srcset="build/images/cave-1800.jpg" media="(min-width:1400px)">
<source srcset="build/images/cave-1200.jpg" media="(min-width:800px)">
<img src="build/images/cave-0600.jpg">
</picture>
<p><a href="https://unsplash.com/@lanceplaine">photo by Kevin Lanceplaine</a></p>
</header>
<main>
<article>
<h1>Using Gulp.js for CSS tasks</h1>
<p><a href="https://gulpjs.com/">Gulp.js</a> is a Node.js task runner which can aid your CSS workflow:</p>
<ul class="iconlist">
<li class="fast">quicker development</li>
<li class="reload">instant reloading</li>
<li class="alert">fewer code errors</li>
</ul>
<h2>Installation</h2>
<p>To install on any Linux, Mac OS or Windows system, ensure <a href="https://nodejs.org/">Node.js</a> is installed then clone the repository:</p>
<pre><code>git clone https://github.com/craigbuckler/gulp-css.git</code></pre>
<p>Navigate to the folder:</p>
<pre><code>cd gulp-css</code></pre>
<p>Install dependencies:</p>
<pre><code>npm i gulp-cli -g
npm i</code></pre>
<h2>Folders</h2>
<p>A demonstration <code>index.html</code> file is provided in the root folder. Other folders and files:</p>
<ul class="linklist">
<li><code>src</code> source files</li>
<li><code>src/images</code> image files</li>
<li><code>src/scss</code> Sass partials</li>
<li><code>build</code> compiled files (created on first build)</li>
</ul>
<h2>Development usage</h2>
<p>Run in live-reloading development mode:</p>
<pre><code>gulp</code></pre>
<p>Navigate to <a href="http://localhost:8000/">http://localhost:8000/</a> or the <strong>External</strong> URL reported if accessing from another device.</p>
<h2>Production build</h2>
<p><code>gulp clean</code> can be used to delete the <code>build</code> folder if necessary.</p>
<p>To build final minified files, set the <code>NODE_ENV</code> environment variable to <code>production</code> before running the <code>gulp css</code> task. On Linux or Mac OS:</p>
<pre><code>NODE_ENV=production
gulp css</code></pre>
<p>(Alternatively, run inline using <code>NODE_ENV=production gulp css</code>)</p>
<p>Windows Powershell:</p>
<pre><code>$env:NODE_ENV="production"
gulp css</code></pre>
<p>Windows legacy command line:</p>
<pre><code>set NODE_ENV=production
gulp css</code></pre>
<h2>Modules used</h2>
<p>The following Gulp.js modules/plugins have been used:</p>
<ul class="linklist">
<li><a href="https://www.npmjs.com/package/gulp">gulp</a> task runner</li>
<li><a href="https://www.npmjs.com/package/gulp-noop">gulp-noop</a> no operation</li>
<li><a href="https://www.npmjs.com/package/gulp-newer">gulp-newer</a> pass newer files</li>
<li><a href="https://www.npmjs.com/package/gulp-imagemin">gulp-imagemin</a> minify images</li>
<li><a href="https://www.npmjs.com/package/gulp-sass">gulp-sass</a> CSS pre-processor</li>
<li><a href="https://www.npmjs.com/package/gulp-postcss">gulp-postcss</a> CSS post-processor</li>
<li><a href="https://www.npmjs.com/package/gulp-sourcemaps">gulp-sourcemaps</a> inline sourcemaps</li>
<li><a href="https://www.npmjs.com/package/gulp-size">gulp-size</a> file size reporting</li>
<li><a href="https://www.npmjs.com/package/del">del</a> deletes files and folders</li>
<li><a href="https://www.npmjs.com/package/browser-sync">browser-sync</a> server with browser synchronization</li>
</ul>
<p>The following <a href="https://postcss.org/">PostCSS</a> plugins have been used:</p>
<ul class="linklist">
<li><a href="https://www.npmjs.com/package/postcss-assets">postcss-assets</a> image information and inlining</li>
<li><a href="https://www.npmjs.com/package/autoprefixer">autoprefixer</a> add vendor prefixes</li>
<li><a href="https://www.npmjs.com/package/usedcss">usedcss</a> remove unused CSS selectors</li>
<li><a href="https://www.npmjs.com/package/cssnano">cssnano</a> CSS code minification</li>
</ul>
</article>
</main>
<footer>
<p>Developed by <a href="https://twitter.com/craigbuckler">Craig Buckler</a></p>
<p>and featured on <a href="https://www.sitepoint.com/">SitePoint.com</a></p>
<p>Please use all code and techniques as you wish!</p>
</footer>
</body>
</html>