https://github.com/damir-sijakovic/gulp_postcss

Gulp, PostCSS and BrowserSync Example
https://github.com/damir-sijakovic/gulp_postcss

browsersync gulp postcss

Last synced: 7 days ago
JSON representation

Gulp, PostCSS and BrowserSync Example

• Host: GitHub
• URL: https://github.com/damir-sijakovic/gulp_postcss
• Owner: damir-sijakovic
• Created: 2021-05-10T05:19:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-10T05:27:08.000Z (over 3 years ago)
• Last Synced: 2024-12-02T21:12:04.602Z (2 months ago)
• Topics: browsersync, gulp, postcss
• Language: JavaScript
• Homepage:
• Size: 9.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Gulp, PostCSS and BrowserSync Example

Tutorial describing how Gulp works with PostCss and BrowserSync.    

Basically, Gulp is used to monitor file changes. On change, PostCSS(and addons)    

are processing all files from ./pcss directory. After that new files are    

compiled into ./css directory.    

### Install Gulp as terminal command

            sudo npm install gulp-cli -g

### Project install

            npm install --save-dev gulp gulp-postcss browser-sync

### List of PostCSS plugins

            https://github.com/postcss/postcss/blob/main/docs/plugins.md

### Install plugin

            npm install --save-dev autoprefixer

### Run inside project dir

            mkdir ./pcss

            touch ./pcss/style.css

            touch ./gulpfile.js

        

### Add to './pcss/style.css' 

            ::placeholder {

              color: gray;

            }

            .image {

              background-image: url([email protected]);

            }

            @media (min-resolution: 2dppx) {

              .image {

                background-image: url([email protected]);

              }

            }

### Add to './gulpfile.js' 

            const { src, dest, watch, series } = require('gulp');

            const autoprefixer = require('autoprefixer');

            const postcss = require('gulp-postcss');

            const browsersync = require('browser-sync').create();

            function cssTask(){

              return src('./pcss/*.css', { sourcemaps: true })

                .pipe(postcss([autoprefixer()]))

                .pipe(dest('css', { sourcemaps: '.' }));

            }

            function browsersyncServe(cb){

              browsersync.init({

                server: {

                  baseDir: '.'

                }

              });

              cb();

            }

            function browsersyncReload(cb){

              browsersync.reload();

              cb();

            }

            function watchTask(){

              watch('*.html', browsersyncReload);

              watch(['./pcss/**/*.css', './js/**/*.js'], series(cssTask, browsersyncReload));

            }

            exports.default = series(

              cssTask,

              browsersyncServe,

              watchTask

            );

### That creates ./css directory with newly compiled file

            ::-moz-placeholder {

              color: gray;

            }

            :-ms-input-placeholder {

              color: gray;

            }

            ::placeholder {

              color: gray;

            }

            .image {

              background-image: url([email protected]);

            }

            @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

              .image {

                background-image: url([email protected]);

              }

            }

### Run BrowserSync as service

            gulp 

    

    

This will automatically watch files for changes process/compile and move them to './css'.

### Have Fun!