Skip to content

Commit 884e3fa

Browse files
eivers88eivers88
committed
switched to gulp, removed webpack
1 parent 5804179 commit 884e3fa

10 files changed

+1386
-1614
lines changed

‎gulpfile.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
var gulp = require('gulp');
2+
var gutil = require('gulp-util');
3+
var source = require('vinyl-source-stream');
4+
var sass = require('gulp-sass');
5+
var babelify = require('babelify');
6+
var watchify = require('watchify');
7+
var exorcist = require('exorcist');
8+
var browserify = require('browserify');
9+
var browserSync = require('browser-sync').create();
10+
11+
// Input file.
12+
watchify.args.debug = true;
13+
var bundler = watchify(browserify('./js/index.js', watchify.args));
14+
15+
// Babel transform
16+
bundler.transform(babelify.configure({
17+
sourceMapRelative: 'js',
18+
presets: ['es2015']
19+
}));
20+
21+
// On updates recompile
22+
bundler.on('update', bundle);
23+
24+
function bundle() {
25+
26+
gutil.log('Compiling JS...');
27+
28+
return bundler.bundle()
29+
.on('error', function (err) {
30+
gutil.log(err.message);
31+
browserSync.notify("Browserify Error!");
32+
this.emit("end");
33+
})
34+
.pipe(exorcist('js/bundle.js.map'))
35+
.pipe(source('bundle.js'))
36+
.pipe(gulp.dest('./js'))
37+
.pipe(browserSync.stream({once: true}));
38+
}
39+
40+
/**
41+
* Gulp task alias
42+
*/
43+
gulp.task('bundle', function () {
44+
return bundle();
45+
});
46+
47+
// Compile sass into CSS & auto-inject into browsers
48+
gulp.task('sass', function () {
49+
return gulp.src("styles/*.scss")
50+
.pipe(sass())
51+
.pipe(gulp.dest("styles"))
52+
.pipe(browserSync.stream());
53+
});
54+
55+
/**
56+
* First bundle, then serve from the ./app directory
57+
*/
58+
gulp.task('default', ['bundle', 'sass'], function () {
59+
60+
browserSync.init({
61+
server: "./"
62+
});
63+
64+
gulp.watch("styles/*.scss", ['sass']);
65+
gulp.watch("./*.html").on('change', browserSync.reload);
66+
});

‎index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta charset="UTF-8">
66
<title>Responsive CSS Sprite Generator</title>
77
<script src="js/vendor/modernizr.js"></script>
8+
<link rel="stylesheet" href="styles/normalize.css">
9+
<link rel="stylesheet" href="styles/main.css">
810
</head>
911

1012
<body>
@@ -58,7 +60,7 @@ <h1>Responsive CSS Sprite Generator</h1>
5860
ga('create', 'UA-70842502-1', 'auto');
5961
ga('send', 'pageview');
6062
</script>
61-
<script src="js/bundle.js"></script>
63+
<script src="js/bundle.js" async></script>
6264

6365
</body>
6466

‎js/bundle.js

+1,075-1,585
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/bundle.js.map

+37-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/index.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
require('../css/normalize.css');
2-
require('../css/main.scss');
31
var Clipboard = require('clipboard');
42
var Packer = require('./packer');
53
var debounce = require('./debounce');

‎package.json

+13-10
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,19 @@
1010
"clipboard": "^1.5.5"
1111
},
1212
"devDependencies": {
13-
"babel-core": "^6.2.1",
14-
"babel-loader": "^6.2.0",
15-
"babel-preset-es2015": "^6.1.18",
16-
"css-loader": "^0.23.0",
17-
"file-loader": "^0.8.5",
18-
"node-sass": "^3.4.2",
19-
"sass-loader": "^3.1.2",
20-
"style-loader": "^0.13.0",
21-
"url-loader": "^0.5.7",
22-
"webpack": "^1.12.9"
13+
"babel-preset-es2015": "^6.3.13",
14+
"babelify": "^7.2.0",
15+
"browser-sync": "^2.11.0",
16+
"browserify": "^12.0.2",
17+
"exorcist": "^0.4.0",
18+
"gulp": "^3.9.0",
19+
"gulp-uglify": "^1.5.1",
20+
"gulp-util": "^3.0.7",
21+
"install": "^0.4.1",
22+
"npm": "^3.5.3",
23+
"sudo": "^1.0.3",
24+
"vinyl-source-stream": "^1.1.0",
25+
"watchify": "^3.6.1"
2326
},
2427
"scripts": {
2528
"test": "echo \"Error: no test specified\" && exit 1"

‎styles/main.css

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
html {
2+
box-sizing: border-box; }
3+
4+
*, *:before, *:after {
5+
box-sizing: inherit; }
6+
7+
html, body {
8+
height: 100%; }
9+
10+
canvas {
11+
vertical-align: middle; }
12+
13+
.page-wrap {
14+
padding-top: 100px;
15+
position: relative;
16+
height: 100%; }
17+
18+
header {
19+
height: 100px;
20+
width: 100%;
21+
background-color: #424242;
22+
position: fixed;
23+
z-index: 2;
24+
padding: 8px 10px 0; }
25+
header h1 {
26+
font-size: 2em;
27+
margin: 10px 0;
28+
color: #ffffff;
29+
font-weight: normal; }
30+
header input {
31+
font-size: 0.9em; }
32+
header input:last-child {
33+
width: 30px;
34+
text-align: center; }
35+
header label {
36+
color: #ffffff;
37+
font-size: 0.9em; }
38+
39+
.content {
40+
position: relative;
41+
min-height: 100%; }
42+
43+
.file-list {
44+
width: 200px;
45+
min-height: 100%;
46+
position: absolute;
47+
top: 0;
48+
left: 0;
49+
background-color: #F5F5F5; }
50+
.file-list p {
51+
color: #ffffff; }
52+
.file-list ul {
53+
list-style: none;
54+
margin: 0;
55+
padding: 5px 5px 0; }
56+
.file-list ul li {
57+
position: relative;
58+
padding: 5px;
59+
margin: 0 0 5px;
60+
background-color: #fff;
61+
min-height: 29px; }
62+
.file-list ul li img {
63+
max-width: 100%;
64+
height: auto;
65+
display: block; }
66+
.file-list ul li span {
67+
position: absolute;
68+
bottom: 5px;
69+
left: 5px;
70+
background-color: #333333;
71+
color: #ffffff;
72+
padding: 3px;
73+
font-size: 0.8em;
74+
border-radius: 5px;
75+
opacity: 0;
76+
transition: opacity 300ms ease; }
77+
.file-list ul li:hover span {
78+
opacity: 1; }
79+
.file-list ul li:hover .remove {
80+
opacity: 1; }
81+
.file-list .remove {
82+
position: absolute;
83+
top: 3px;
84+
right: 3px;
85+
width: 24px;
86+
height: 24px;
87+
background: transparent url("../img/ic_clear_black_24px.svg") 0 0 no-repeat;
88+
/*background: transparent url('../img/ic_remove_circle_outline_black_24px.svg') 0 0 no-repeat;*/
89+
cursor: pointer;
90+
opacity: 0.5; }
91+
.file-list .remove:hover {
92+
transform: scale(1.1); }
93+
94+
.output {
95+
padding: 10px 10px 0 210px; }
96+
97+
.add-files-btn {
98+
position: absolute;
99+
top: 0;
100+
left: 0;
101+
right: 0;
102+
bottom: 0;
103+
margin: auto;
104+
width: 48px;
105+
height: 48px;
106+
background: transparent url("../img/ic_add_circle_black_48px.svg") center center no-repeat;
107+
cursor: pointer;
108+
display: none; }
109+
110+
.add-files-text {
111+
position: absolute;
112+
top: 76px;
113+
left: 0;
114+
right: 0;
115+
bottom: 0;
116+
margin: auto;
117+
width: 175px;
118+
height: 20px;
119+
text-align: center;
120+
cursor: pointer;
121+
display: none; }
122+
123+
.dropbox {
124+
/*border: solid 1px #000;*/
125+
background: transparent url("../img/tile-light.jpg") 0 0 repeat;
126+
background-size: 20px;
127+
margin: 0 auto;
128+
float: left;
129+
position: relative;
130+
/*width: 100%;*/
131+
min-width: 100%;
132+
min-height: 512px;
133+
cursor: pointer; }
134+
.dropbox.is-empty .add-files-btn, .dropbox.is-empty .add-files-text {
135+
display: block; }
136+
137+
.fileSelect {
138+
display: block; }
139+
140+
.clear {
141+
width: 100%;
142+
clear: both; }
143+
144+
.result {
145+
padding: 10px 0 0 0; }
146+
147+
textarea {
148+
width: 1024px; }
149+
150+
.download {
151+
position: absolute;
152+
top: 10px;
153+
right: 10px;
154+
width: 80px;
155+
height: 48px;
156+
background: transparent url("../img/ic_file_download_white_48px.svg") center 0 no-repeat;
157+
cursor: pointer; }
158+
.download span {
159+
font-size: 0.8em;
160+
color: #ffffff;
161+
width: 80px;
162+
text-align: center;
163+
position: absolute;
164+
left: 0;
165+
top: 46px; }
166+
.download:active {
167+
transform: scale(0.9); }
168+
169+
.download-info {
170+
font-size: 0.7em; }
171+
172+
.copy {
173+
position: absolute;
174+
top: 10px;
175+
right: 100px;
176+
width: 80px;
177+
height: 48px;
178+
background: transparent url("../img/ic_content_copy_white_48px.svg") center 0 no-repeat;
179+
cursor: pointer; }
180+
.copy span {
181+
font-size: 0.8em;
182+
color: #ffffff;
183+
width: 80px;
184+
text-align: center;
185+
position: absolute;
186+
left: 0;
187+
top: 54px; }
188+
.copy:active {
189+
transform: scale(0.9); }
190+
191+
.dimensions {
192+
font-size: 0.8em; }

‎css/main.scss renamed to ‎styles/main.scss

File renamed without changes.

‎css/normalize.css renamed to ‎styles/normalize.css

File renamed without changes.

‎webpack.config.js

-15
This file was deleted.

0 commit comments

Comments
 (0)