logo
down
shadow

Using gulp and gulp-rename to output multiple stylus theme files


Using gulp and gulp-rename to output multiple stylus theme files

By : user2955265
Date : November 22 2020, 10:38 AM
this one helps. I'm trying to set up a theme system for my project, what I have currently takes a theme file in stylus like theme\default.theme.styl that only includes variables storing colors and applies it to whatever other component style files we have included (e.g. button.styl). The idea is that I can have more than one theme file, say blue.theme.styl and red.theme.styl and gulp will output two separate css files based on the component styling. So I'd get button.blue.styl and button.red.styl as two separate files. , Turns out it works to just return an array of streams:
code :
TaskManager.createTask
  name: 'css'
  description: 'Build the component CSS files'
  options: buildOptions.concat
    name: 'theme'
    type: 'Array'
    description: 'themes to compile'
    default: 'default'
    supported: ['default', 'blue', 'red']
  hide: true
  fn: ->
    themes = TaskManager.getArg('theme')
    DEST = 'dest/components'
    nib = require 'nib'

    stream = []

    createTask = (themeName) ->
      return gulp.src ["src/**/*.styl", "!src/theme/*", "!src/global/*"]
        .pipe(plugins.plumber(errorHandler: TaskManager.error))
        .pipe(plugins.stylus
          use: [
            nib()
          ]
          include: [
            'src/util'
            'src/global'
            'src/theme'
          ]
          import: "#{themeName}.theme"
        )
        .pipe(rename (path) ->
          path.extname = ".#{themeName}.css"
          undefined
        )
        .pipe(plugins.filelog 'css')
        .pipe(gulp.dest 'dest')

    themes.map (name) ->
      task = createTask name
      stream.push task

    return stream


Share : facebook icon twitter icon
How to define a gulp task that initiates watchify and gulp-stylus?

How to define a gulp task that initiates watchify and gulp-stylus?


By : Aymen Souilmi
Date : March 29 2020, 07:55 AM
may help you . I am trying to create a composite gulp task which runs 2 separate watch tasks at the same time: , The following seems to work:
code :
gulp.task('watch', [ 'watch-css', 'watch-js' ]);
gulp-typescript with gulp-sourcemap: output files to same directory

gulp-typescript with gulp-sourcemap: output files to same directory


By : strontium
Date : March 29 2020, 07:55 AM
wish helps you Just set the sourceRoot property of the gulp-sourcemap write options. This task works:
code :
gulp.task("ts", function () {
    tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject)).js
        .pipe(sourcemaps.write({sourceRoot: "/js"}))
        .pipe(gulp.dest("js"));
});
Using Gulp and Gulp Replace Name to clone a project but rename files that contain a certain word inside multiple folders

Using Gulp and Gulp Replace Name to clone a project but rename files that contain a certain word inside multiple folders


By : Xinkun Li
Date : November 20 2020, 11:01 PM
I wish this help you It's a bug in gulp-replace-name. When it encounters a directory it tries to call a callback cb that doesn't exist, which leads to the error you receive. It also doesn't even attempt to rename directories, which you need.
I suggest you use the gulp-rename plugin instead. It's thoroughly tested and has had a large user base for years, so you're unlikely to run into problems like this.
code :
var gulp = require('gulp');
var rename = require("gulp-rename");

gulp.task("duplicate", function () {
  return gulp
    .src("./originalProject/**/*")
    .pipe(rename(function(file) {
      file.dirname = file.dirname.replace(/originalProject/g, "cloneProject");
      file.basename = file.basename.replace(/originalProject/g, "cloneProject");
    }))
    .pipe(gulp.dest("./cloneProject"));
});

gulp.task("default", ["duplicate"]);
gulp: set multiple gulp.src and respective gulp.dest (on gulp-sass example)

gulp: set multiple gulp.src and respective gulp.dest (on gulp-sass example)


By : Håñäd Ýàre Mäýkäl Mö
Date : March 29 2020, 07:55 AM
around this issue See my answer to a similar question: Gulp.dest for compiled sass. You should be able to modify that easily for your purposes. If you have trouble edit your question with your code and you will get help.
code :
var gulp = require("gulp");
var rename = require("gulp-rename");
var path = require("path");
var sass = require("gulp-sass");

gulp.task('modules-sass', function () {

      // using .scss extensions for sass files

  return gulp.src(`development/**/*.scss`)

    .pipe(sass())

    .pipe(rename(function (file) {

        // file.dirname before any changes
        console.log("file.dirname  1 = " + file.dirname);

        // this removes the last directory
        var temp = path.dirname(file.dirname);
        console.log("    temp = " + temp);

        // now add 'Css' to the end of the directory path

        file.dirname = path.join(temp, 'Css');
        console.log("    after = " + file.dirname);
    }))

    .pipe(gulp.dest('development'));
});

           // this is the directory structure I assumed
           // gulpfile.js is just above the 'development' directory

// development / Admin / Sass1 / file1.scss
// development / Admin / Sass1 / file2.scss

// development / Admin / Sass2 / file3.scss
// development / Admin / Sass2 / file4.scss

// development / Admin / Css

// development / Public / Sass1 / file5.scss
// development / Public / Sass1 / file6.scss

// development / Public / Sass2 / file7.scss
// development / Public / Sass1 / file8.scss

 // development / Public / Css
Ordering the output using gulp and main-bower-files (gulp-order doesn't work)

Ordering the output using gulp and main-bower-files (gulp-order doesn't work)


By : Sander de jong
Date : March 29 2020, 07:55 AM
I wish this helpful for you After much spelunking through the docs I figured out that you need to specify the base of where the order plugin needs to start from, e.g.:
Related Posts Related Posts :
  • Decimal output parameter rounded to integer in EF5.0
  • Error when deploying ear in weblogic 11g
  • autocomplete with extjs :ComboBox with REMOTE query store
  • How to make full background color in skeleton, responsive 960 grid?
  • How to send a variable of type struct in MPI_Send()?
  • I accidentally deleted a picture in my album on FB and it was uploaded years ago and I dont have a copy how can i get it
  • Does setting techOrder for video.js really work?
  • What are XMPP extensions (XEPs), and how do I use them?
  • Interactive alternative to dot?
  • Doctrine 2: how do you use a subquery column (in the SELECT clause)
  • Merging graphs using boost graph
  • Creating Order Item Grid in Magento
  • Can't remap Ctrl+W to the F2 key in autohotkey
  • Property 'throw' does not exist on type 'typeof Observable'
  • Unable to deploy SAPUI5 application with 404 error
  • Xcode 10 build fail rm permission denied in /bin/sh/
  • Handling quorum writies fail on Cassandra
  • How to finalize log file just after time is over when using logback SizeAndTimeBasedFNATP?
  • Write custom widget with GTK3
  • How to remove UINavigationBar inner shadow in iOS 7?
  • Wordpress dynamic widget by location?
  • XDocument replace all node value with lower case
  • Invalid tagdir attribute while web-fragment is used
  • Set default font/text size in RTF Control
  • what video formats supported by chromecast device (mp4,flv,m3u8,flv,avi)?
  • sbcl - how to muffle "undefined variable" warning?
  • Get an eventbrite event ID
  • Obtain date without timestamp in DB2
  • Cron job to SFTP files in a directory
  • Draw two head arrows in fabric.js
  • YOLO darknet vs darkflow
  • Parse custom rss tags using Rome API
  • Creating text editor like EDIT on Command Prompt using FreePascal
  • Subplot hides xlabel
  • NServiceBus long running process that timesout
  • Qt4 - How to add a row in a QTableWidget when sorting is enable?
  • Cancel command in Grunt that hasn't been launched
  • Canvas globalCompositeOperation is not working correctly
  • HTML.Kendo().Dropdownlist set default item
  • vagrant up failed, /dev/vboxnetctl: no such file or directory
  • How to use jssor carousel to build client carousal
  • Theory what is meant by validating security concerns for these user groups
  • How to build correct SPARQL Query
  • Connecting to MySQL (on Google Cloud SQL) via JDBC and IPv6?
  • Fetching transaction in several iterations
  • is it possible to use dropbox datastore api as shared datastore?
  • phpExcel 1.8 Named Ranges in Formula
  • Cisco VPN IP address
  • No address associated with hostname using vagrant
  • 2 way data-binding between a polymer component and a model?
  • How can I rename an already published app in the Windows Dev Center?
  • Using Chef 12 , Chef Client unable to connect to chef Server
  • GCM notification not working (GoogleCloudMessaging)
  • Measured GFLOPS is greater then theoretical GFLOPS
  • Progress ABL - strip and add to temp table
  • Errors occuring when make-ing Aircrack-ng on raspberry pi
  • Detecting Handedness from Device Use
  • Query a manual list of data items
  • Similar to pivot - Windows 8.1 Desktop app
  • CKEDITOR And Styles configuration with only toolbar
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org