Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    csstime-gulp-taskspublic

    csstime-gulp-tasks

    Join the chat at https://gitter.im/csstime/csstime-gulp-tasks

    Prepared Gulp tasks to build and optimize assets for your project (SASS, LESS, CSS, SVG, images, sprites and more). Themes are supported via separated additional css-bundles.

    npm install csstime-gulp-tasks
    

    List of used packages:

    • autoprefixer-core,
    • gulp-concat,
    • gulp-csscomb,
    • gulp-csso,
    • gulp-header,
    • gulp-imagemin,
    • gulp-less,
    • gulp-sass,
    • gulp-postcss,
    • gulp-svgstore,
    • gulp-uglify,
    • gulp.spritesmith,
    • node-notifier,
    • normalize.css,
    • pleeease-filters,
    • postcss-opacity.

    If your project has following structure you can use these tasks or some of them. component.json should have "name" of component.

    gulpfile.js
    static/ #always stored in a repository
    ├──favicon.ico
    ├──robots.txt
    └──...
    src/ #source directory
    └──components/
        └──document/
            ├──component.json
            └──assets
                ├──other/
                ├──fonts/
                ├──images/
                ├──sprites/
                └──sass/
                    └──themes/
                        └──mobile.scss
                    └──styles.scss
                ├──svg/
                └──symbols/
                    ├──icon1.svg
                    └──icon2.svg
        └──componentA/
            ├──component.json
            └──assets
                ├──sprites/
                └──sass/
                    └──themes/
                        └──mobile.scss
                    └──styles.scss
                ├──svg/
                └──symbols/
                    ├──icon3.svg
                    └──icon4.svg
        └──componentB/
            ├──component.json
            └──assets
                └──css/
                    └──styles.css
    

    Example App with such structure you can find here csstime-example.

    Just write this in your gulpfile.js:

    'use strict';
     
    var gulp = require('gulp'),
        config = {}, // custom config
        csstime = require('csstime-gulp-tasks');
     
    config.useSvgSymbols = true; // custom configuration
    config.themedStylesFileNames = ['mobile']; // separated themes
    csstime.loadGulpTasks(gulp, config);

    You can pass custom config in csstime.loadGulpTasks(gulp, config); to override default params. Learn more about default params in configs documentation.

    Here is available high level tasks which you can see for gulp --tasks:

    Name Action
    csstime-mode-release Build, optimize and minify all assets. Remove temporary files.
    csstime-mode-debug Collect and build assets. You can analyze temporary files.
    csstime-mode-watch Watch changing files and run in debug mode
    csstime-exec-csscomb Execute csscomb
    csstime-clean Clear destination directory

    Learn more about all tasks in tasks documentation.

    After csstime-mode-release you will get following structure:

    gulpfile.js
    static/ #without changes
    src/ #without changes
    build/ #all generated files here
        ├──favicon.ico
        ├──robots.txt
        ├──...
        ├──styles.css
        └──themes/
            └──mobile.css
        └──components/
            ├──sprites.png
            ├──symbols.svg
            └──document/ #without sass, css, sprites
                ├──other/
                ├──fonts/
                ├──images/
                └──svg/
            └──componentA/
                └──svg/
    
    

    Migration

    Learn how to migrate from previous versions here.

    install

    npm i csstime-gulp-tasks

    Downloadsweekly downloads

    4

    version

    6.1.0

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar