Commit 64d5ec42 authored by revolutionary-bench's avatar revolutionary-bench
Browse files

Setup initial gulp jobs and add documentation

parent 59f7e2a7
node_modules/
# Stylesheet
The Reddit stylesheet for the /r/Anarchism subreddit.
## Installation
You will need to install:
- Gulp
- Gulp Sass
- Gulp Minify CSS
You can install these using npm:
```
npm install --save-dev gulp
npm install --save-dev gulp-clean-css
npm install --save-dev gulp-rename
npm install --save-dev gulp-sass
```
If you have never worked with Gulp before, feel free to do some research, maybe check-out this guide:
https://travismaynard.com/writing/getting-started-with-gulp
If this list is out of date, look at the beginning of the `gulpfile.js` and look through the `require` statements and see whether you are missing something from that list.
You should especially do this if you have installed the above with npm, but you keep getting the `Error: Cannot find module` error when you try to use gulp.
## Usage
There are various jobs setup in the `gulpfile.js`. A job does something for you relevant to the project.
If you want to convert the Sass to CSS and then minify that CSS, you can run `gulp default`, which then runs `gulp sass` and `gulp minify-css`.
Here are the gulp jobs and what they do:
- `gulp default` runs `gulp sass` and `gulp minify-css` sequentially.
- `gulp sass` will convert the Sass files into CSS files, e.g. creating `build/stylesheets/main.css` from `source/stylesheets/main.scss`.
- `gulp minify-css` will [minify](https://en.wikipedia.org/wiki/Minification_(programming\)) that CSS for you (creating `build/minified/main.min.css`).
- `gulp watch` will watch for changes to the Sass files and run `gulp sass` and `gulp minify-css` whenever a change is detected.
## Roadmap of the Directories
[Here](http://thesassway.com/beginner/how-to-structure-a-sass-project) is an excellent overview of how a Sass project should be structured.
We try to follow these suggestions in ways that help us, but we do not follow the advice religiously.
That said, here is a layout of the various files and directories, and their purposes.
Under the main project you will notice two directories: `source` and `build`.
`source` is where you will find the Sass code you will want to work on.
Under `build` you will find the artifacts produced by the gulp jobs, e.g. the minified CSS that should be entered as [the subreddit's stylesheet](https://www.reddit.com/r/Anarchism/about/stylesheet/).
You should never manually change files under `build` - all `build` files should be generated by the gulp jobs.
Under `source` are directories for the different kinds of files.
`images` is for storing images, obviously.
Reddit requires we manually upload images for the subreddit, so the only purpose of the directory is to keep track of the changes to images (so we can retrieve old images if accidentally deleted, etc.).
In a real website's project, those images would be referenced directly in the Sass and packaged with the CSS to be hosted for the webpage.
`stylesheets` is where you will find the Sass files that make up the subreddit's styles.
There are directories for various components or modules of the Sass styles, and a `main.scss` which [imports](http://sass-lang.com/guide#topic-5) those other Sass files to build the CSS.
This diff is collapsed.
This diff is collapsed.
// Include gulp
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
cleanCss = require('gulp-clean-css'),
config = {
sourceSass: 'source/stylesheets/*.scss', // where we can find the main Sass file
minDir: 'build/minified', // where we want to keep the minified CSS
buildStylesDir: 'build/stylesheets' // where the CSS from Sass lives
};
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(config.sourceSass)
.pipe(sass())
.pipe(gulp.dest(config.buildStylesDir));
});
// Minify the CSS
gulp.task('minify-css', function () {
gulp.src(config.buildStylesDir + '/*.css') // path to your file, e.g. 'build/stylesheets/main.css'
.pipe(cleanCss({debug: true}, (details) => {
console.log(`${details.name}: Original Size: ${details.stats.originalSize}`);
console.log(`${details.name}: Minified Size: ${details.stats.minifiedSize}`);
}))
.pipe(rename({
suffix: '.min'
})) // include .min in the filename, e.g. 'main.min.css'
.pipe(gulp.dest(config.minDir));
});
// Watch Files For Changes
// and Run Job(s) When Change Detected
gulp.task('watch', function() {
gulp.watch(config.sourceSass, ['sass', 'minify-css']);
});
// Default Task(s):
// Run all of these when calling `gulp default`
gulp.task('default', ['sass', 'minify-css']);
This diff is collapsed.
This diff is collapsed.
// Author: revolutionary_bench
// Date: 2018-08-28 Tuesday
// Purpose: Provide the main stylesheet that imports
// all other stylesheets to produce the actual Reddit
// stylesheet used for /r/Anarchism
@import './legacy/legacy.scss';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment