Skip to content
This repository was archived by the owner on Jun 7, 2022. It is now read-only.

Commit 1db4e57

Browse files
MscottBMscottB
committed
version 1.0.0
1 parent fb571c6 commit 1db4e57

13 files changed

+3219
-5658
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env"]
3+
}

‎README.md

+26-82
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,24 @@
99

1010

1111
# PureCSS-OneFile
12-
Concatenation of the files that are in the "build" folder, to generate a single file and work in a more comfortable way. It also includes the sass precompiler.
1312

14-
## Dependencies
13+
Work with PureCss and Sass, from one place, with a single file for your projects.
14+
Using Gulp, Babel and ES6.
1515

16-
* Based on [PureCSS](https://purecss.io/)
17-
* Includes precompiler [Sass](http://sass-lang.com/)
16+
# Installation before using PureCss-OneFile
1817

18+
If you have problems, you may need to install one of these dependencies in your global environment.
1919

20-
## Install NPM
20+
* [Yarn](https://yarnpkg.com/)
21+
* [Gulp-Cli](https://gulpjs.com/)
22+
* [node-notifier-cli](node-notifier-cli)
2123

22-
```sh
23-
npm install purecss-onefile --save-dev
24-
```
24+
## Dependencies
25+
26+
* Based on [PureCSS](https://purecss.io/).
27+
* Precompiler [Sass](http://sass-lang.com/).
28+
* Use [Gulp](https://gulpjs.com/).
29+
* ECMAScript 6 con [Babel](https://babeljs.io/).
2530

2631
## Install Yarn
2732

@@ -31,87 +36,26 @@ yarn add -D purecss-onefile
3136

3237
## Commands gulp
3338

34-
```
35-
>gulp pure
36-
37-
>gulp compound
38-
39-
>gulp sass-p
40-
41-
>gulp sass-c
42-
```
43-
## Four ways to compile Pure CSS:
44-
45-
**Pure**, which contains the main(pure.css), plus the files included in the purecss-custom folder.
46-
47-
_Deliver the following files:_
48-
49-
50-
**Original**:
51-
```json
52-
./purecss-onefile/onefile-pure.css
53-
```
54-
55-
**Minified**:
56-
```json
57-
./purecss-onefile/onefile-pure.min.css
58-
```
59-
60-
**Compound**, in this compilation select the modules to compile, include the custom folder.
61-
62-
Modules available:
63-
```javascript
64-
return gulp.src([
65-
"node_modules/purecss/build/base.css",
66-
"node_modules/purecss/build/base-context.css",
67-
"node_modules/purecss/build/buttons.css",
68-
"node_modules/purecss/build/buttons-core.css",
69-
"node_modules/purecss/build/forms.css",
70-
"node_modules/purecss/build/forms-nr.css",
71-
"node_modules/purecss/build/grids.css",
72-
"node_modules/purecss/build/grids-core.css",
73-
"node_modules/purecss/build/grids-responsive.css",
74-
"node_modules/purecss/build/grids-responsive-old-ie.css",
75-
"node_modules/purecss/build/grids-units.css",
76-
"node_modules/purecss/build/menus.css",
77-
"node_modules/purecss/build/menus-core.css",
78-
"node_modules/purecss/build/menus-dropdown.css",
79-
"node_modules/purecss/build/menus-horizontal.css",
80-
"node_modules/purecss/build/menus-scrollable.css",
81-
"node_modules/purecss/build/menus-skin.css",
82-
"node_modules/purecss/build/tables.css",
83-
"purecss-custom/*.css"
84-
])
85-
```
86-
87-
_Deliver the following files:_
88-
89-
**Original**:
90-
```json
91-
./purecss-onefile/onefile-compound.css
92-
```
93-
94-
**Minified**:
95-
```json
96-
./purecss-onefile/onefile-compound.min.css
97-
```
98-
99-
**Sass Pure**, Includes compilation in the compilation process of pure.
39+
| Command | description |
40+
| :---: | :---:|
41+
| gc | compiles the gulp file, written in Es6 to Es5. |
42+
| sassC | compiles the Sass/Scss files to Css, from their respective folders. |
43+
| concatC | concatenates the PureCss files, selected from the files-purecss.js file. |
44+
| miniC | minimizes the file created with the concatC command. |
45+
| pureC | concatenates the pure-min file with the sass/scss/css files that the developer creates. |
46+
| miniP | Minimizes the file created with pureC. |
47+
| completeSC | compiles the gulp file, concatenates and minimizes the selected purecss files into the files-purecss.js file and notifies. |
48+
| completeSP | compiles the gulp file, concatenates and minimizes the selected Purecss and Sass" files, and notifies. |
10049

101-
**Sass Compound**, Includes compilation in the compilation process of compound.
50+
# How to use completeSC
10251

103-
## Add in angular
52+
The files available for occupancy are found in files-purecss.js, which will be added to the concatCompound task found in gulpfilesEs6.js in the gulp.src section.
10453

105-
```json
106-
"styles": [
107-
"../purecss-onefile/onefile-pure.min.css"
108-
],
109-
```
11054
# License MIT
11155
===========
11256

11357
Copyright (c) 2017 Michael Scott B
11458

11559
For more information see the [LICENSE file][]
11660

117-
[LICENSE file]: https://github.com/skotvarg/purecss-onefile/blob/master/LICENSE.md
61+
[LICENSE file]:

‎gulp-config/files-purecss.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var purecss = {
2+
base: '../node_modules/purecss/build/base-min.css',
3+
baseC: '../node_modules/purecss/build/base-context-min.css',
4+
botton: "../node_modules/purecss/build/buttons-min.css",
5+
bottonC: "../node_modules/purecss/build/buttons-core-min.css",
6+
forms: "../node_modules/purecss/build/forms-min.css",
7+
formsNr: "../node_modules/purecss/build/forms-nr-min.css",
8+
grids: "../node_modules/purecss/build/grids-min.css",
9+
gridsC: "../node_modules/purecss/build/grids-core-min.css",
10+
gridsR: "../node_modules/purecss/build/grids-responseive-min.css",
11+
gridsRO: "../node_modules/purecss/build/grids-responsive-old-ie-min.css",
12+
gridsU: "../node_modules/purecss/build/grids-units-min.css",
13+
menus: "../node_modules/purecss/build/menus-min.css",
14+
menusC: "../node_modules/purecss/build/menus-core-min.css",
15+
menusD: "../node_modules/purecss/build/menus-dropdown-min.css",
16+
menusH: "../node_modules/purecss/build/menus-horizontal-min.css",
17+
menusSc: "../node_modules/purecss/build/menus-scrollable-min.css",
18+
menusSk: "../node_modules/purecss/build/menus-skin-min.css",
19+
tables: "../node_modules/purecss/build/tables-min.css",
20+
cssCustom: "../purecss-custom/*.css",
21+
pure: "../node_modules/purecss/build/pure-min.css",
22+
pureNr: "../node_modules/purecss/build/pure-nr-min.css"
23+
};
24+
25+
module.exports = purecss;

‎gulp-config/gulpfileEs5.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
'use strict';
2+
3+
var _gulp = require('gulp');
4+
5+
var _gulp2 = _interopRequireDefault(_gulp);
6+
7+
var _gulpConcatCss = require('gulp-concat-css');
8+
9+
var _gulpConcatCss2 = _interopRequireDefault(_gulpConcatCss);
10+
11+
var _gulpCleanCss = require('gulp-clean-css');
12+
13+
var _gulpCleanCss2 = _interopRequireDefault(_gulpCleanCss);
14+
15+
var _gulpRename = require('gulp-rename');
16+
17+
var _gulpRename2 = _interopRequireDefault(_gulpRename);
18+
19+
var _gulpSass = require('gulp-sass');
20+
21+
var _gulpSass2 = _interopRequireDefault(_gulpSass);
22+
23+
var _filesPurecss = require('./files-purecss');
24+
25+
var _filesPurecss2 = _interopRequireDefault(_filesPurecss);
26+
27+
var _pathDirectory = require('./path-directory.json');
28+
29+
var _pathDirectory2 = _interopRequireDefault(_pathDirectory);
30+
31+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
32+
33+
/**
34+
* purecss plus custom files css
35+
* pure-min file plus purecss-custom css files
36+
*/
37+
_gulp2.default.task('pureCustom', function () {
38+
return _gulp2.default.src([_filesPurecss2.default.pure, _filesPurecss2.default.cssCustom]).pipe((0, _gulpConcatCss2.default)("onefile-pure.css")).pipe(_gulp2.default.dest(_pathDirectory2.default.pureCustom.dest));
39+
});
40+
41+
_gulp2.default.task('minicssPure', function () {
42+
return _gulp2.default.src(_pathDirectory2.default.minicssPure.src).pipe((0, _gulpCleanCss2.default)({ debug: true }, function (details) {
43+
console.log(details.name + ': ' + details.stats.originalSize);
44+
console.log(details.name + ': ' + details.stats.minifiedSize);
45+
})).pipe((0, _gulpRename2.default)({ suffix: ".min" })).pipe(_gulp2.default.dest(_pathDirectory2.default.minicssPure.dest));
46+
});
47+
48+
/**
49+
* concatenate miniaturized purecss files
50+
* concatenate the available purecss files, to have a single file, with the necessary dependencies.
51+
*/
52+
_gulp2.default.task('concatCompound', function () {
53+
return _gulp2.default.src([_filesPurecss2.default.base, _filesPurecss2.default.baseC, _filesPurecss2.default.botton, _filesPurecss2.default.cssCustom]).pipe((0, _gulpConcatCss2.default)("onefile-compound.css")).pipe(_gulp2.default.dest(_pathDirectory2.default.concatCompound.dest));
54+
});
55+
56+
/**
57+
* minimize onefile-compound
58+
* reduces onefile-compound, pre-generated file size.
59+
*/
60+
_gulp2.default.task('minicssCompound', function () {
61+
return _gulp2.default.src(_pathDirectory2.default.minicssCompound.src).pipe((0, _gulpCleanCss2.default)({ debug: true }, function (details) {
62+
console.log(details.name + ': ' + details.stats.originalSize);
63+
console.log(details.name + ': ' + details.stats.minifiedSize);
64+
})).pipe((0, _gulpRename2.default)({ suffix: ".min" })).pipe(_gulp2.default.dest(_pathDirectory2.default.minicssCompound.dest));
65+
});
66+
67+
/**
68+
* Sass compiler
69+
* convert sass/*.scss|sass files to purecss-custom/*.css
70+
*/
71+
72+
_gulp2.default.task('sassCompilation', function () {
73+
return _gulp2.default.src(_pathDirectory2.default.sassCompilation.src).pipe((0, _gulpSass2.default)().on('error', _gulpSass2.default.logError)).pipe(_gulp2.default.dest(_pathDirectory2.default.sassCompilation.dest));
74+
});

‎gulp-config/gulpfileEs6.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
'use strict';
2+
3+
import gulp from 'gulp';
4+
import concatCss from 'gulp-concat-css';
5+
import cleanCss from 'gulp-clean-css';
6+
import rename from 'gulp-rename';
7+
import sass from 'gulp-sass';
8+
9+
import purecss from './files-purecss';
10+
import path from './path-directory.json';
11+
12+
/**
13+
* purecss plus custom files css
14+
* pure-min file plus purecss-custom css files
15+
*/
16+
gulp.task('pureCustom', () => {
17+
return gulp.src([
18+
purecss.pure, purecss.cssCustom
19+
])
20+
.pipe(concatCss("onefile-pure.css"))
21+
.pipe(gulp.dest(path.pureCustom.dest))
22+
});
23+
24+
25+
gulp.task('minicssPure', () => {
26+
return gulp.src(path.minicssPure.src)
27+
.pipe(cleanCss({ debug: true }, function(details) {
28+
console.log(`${details.name}: ${details.stats.originalSize}`);
29+
console.log(`${details.name}: ${details.stats.minifiedSize}`);
30+
}))
31+
.pipe(rename({ suffix: ".min" }))
32+
.pipe(gulp.dest(path.minicssPure.dest))
33+
});
34+
35+
36+
/**
37+
* concatenate miniaturized purecss files
38+
* concatenate the available purecss files, to have a single file, with the necessary dependencies.
39+
*/
40+
gulp.task('concatCompound', () => {
41+
return gulp.src([
42+
purecss.base, purecss.baseC, purecss.botton, purecss.cssCustom
43+
])
44+
.pipe(concatCss("onefile-compound.css"))
45+
.pipe(gulp.dest(path.concatCompound.dest))
46+
});
47+
48+
/**
49+
* minimize onefile-compound
50+
* reduces onefile-compound, pre-generated file size.
51+
*/
52+
gulp.task('minicssCompound', () => {
53+
return gulp.src(path.minicssCompound.src)
54+
.pipe(cleanCss({ debug: true }, function(details) {
55+
console.log(`${details.name}: ${details.stats.originalSize}`);
56+
console.log(`${details.name}: ${details.stats.minifiedSize}`);
57+
}))
58+
.pipe(rename({ suffix: ".min" }))
59+
.pipe(gulp.dest(path.minicssCompound.dest))
60+
});
61+
62+
63+
/**
64+
* Sass compiler
65+
* convert sass/*.scss|sass files to purecss-custom/*.css
66+
*/
67+
68+
gulp.task('sassCompilation', () => {
69+
return gulp.src(path.sassCompilation.src)
70+
.pipe(sass().on('error', sass.logError))
71+
.pipe(gulp.dest(path.sassCompilation.dest))
72+
73+
});

‎gulp-config/path-directory.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"sassCompilation": {
3+
"src": "../sass/*.{scss,sass}",
4+
"dest": "../purecss-custom"
5+
},
6+
"concatCompound": {
7+
"dest": "../purecss-onefile"
8+
},
9+
"minicssCompound": {
10+
"src": "../purecss-onefile/onefile-compound.css",
11+
"dest": "../purecss-onefile"
12+
},
13+
"pureCustom": {
14+
"dest": "../purecss-onefile"
15+
},
16+
"minicssPure": {
17+
"src": "../purecss-onefile/onefile-pure.css",
18+
"dest": "../purecss-onefile"
19+
}
20+
}

0 commit comments

Comments
 (0)