when you hit save on any _*.scss file watch does not run sass compile.

First, here is my configuration for reference.

  "kangaroo": {
    "src": "../app/design/frontend/AlanKent/kangaroo",
    "dest": "../pub/static/frontend/AlanKent/kangaroo",
    "locale": ["en_US", "en_AU"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "AlanKent",
    "name": "kangaroo",
    "files": [
      "css/kangaroo2",
      "css/styles-m",
      "css/styles-l",
      "css/email",
      "css/email-inline"
    ]
  },

css/kangaroo2 is a .less file in the theme. When I touch this file, all of the Less files are recompiled. This is slow.

How do you suggest I achieve something like the following?

• For css/styles-l watch css/styles-l.less and **/_*.less.
• For css/styles-m watch css/styles-m.less and **/_*.less.
• For css/email watch css/email.less and **/_*.less.
• For css/email-inline watch css/email-inline.less and **/_*.less.
• For css/kangaroo2 watch **/*.less.

The first four could be merged in practice, because they all depend on the same files. So if one changes, they will all probably need recompiling. But it is important (for speed) that changes to kangaroo2.less DO NOT trigger the first 4 to recompile (and hence the **/_*.less rule - only things with leading underscore will trigger those files to recompile).

I actually don't care which way its achieved, but being able to change kangaroo2.less without compiling the other files is the important part. It goes from say 10 seconds to under 1 per file change - much nicer experience. Maybe need to be able to specify watch dependencies per file?

This is a relatively minor thing, but I thought I would mention it if you wanted to have a go. If you use the standard Magento 2 build process, there is actually a css/docs directory that gets created. This includes an online viewable set of docs for the Magento 2 mixin library.

I think it is basically cp -r lib/web/css/docs/ pub/static/frontend/Magento/blank/en_US/css/docs/ followed by Less compiling the source/docs.less file into source/docs.css.

I mention it because if you use the default Magento 2 build process then run this Gulp project on it, the blank theme is deleted and created again but without the docs directory. I actually think not creating the docs directory by default is a good thing - you don't want it there in production mode. But it would be convenient if there was say a separate gulp target to cp across the tree and run Less on it - that way people who want to look at the docs can, but it is not there by default. There is not need for gulp watch do watch this directory. Its just a once off setup if you want to read those docs.

Great tool, still loving it. One issue I have however is we are moving towards projects only putting 'vendor' in '.gitignore' for the rest of Magento 2. (Its going to take a while to get there, but it is the target.) This tool however violates this rule. The problems I have are:

• Files I should not change do not go under 'vendor'.
• Files I should change (config files) are mixed in with files I should not change - so its not easy to include files I should change in my project GIT repo but not commit files I should not change.
• npm install puts LOTS of big files under the tool directory. That means you cannot just ignore the problem and commit the whole directory to your project's GIT repo.
• Currently this picks tools has its home directory - should it be called frontools to match the project name to avoid confusion? (So config files go in say frontools/configs in the GIT project tree.)

Suggestion (might be better ideas):

• Default recommendation to install this tool is its own directory/composer project. This is a tool what works on multiple projects, and it has files you should not change per project, so install it more like a tool.
• Have the tool to load configuration files relative to the directory gulp is run from with an environment variable FRONTOOL_HOME (or ~/.frontool) or similar holding the directory to where the tool is, or a shell script I can put in my PATH variable so the configs directory can exist per M2 project independent to the rest of the tool.

Basically make it easy to install the tool somewhere shared, but save the per project configuration in the GIT repo for that project.

And if you get it going nicely, let me know so we can copy for our built in grunt support - I am thinking to remove grunt support to be a separate project from the M2 code base, just like this tool is. It has exactly the same problem at the moment.

Just because we can 😉

By converting some methods to promises we might realise a big build speed improvement.
I would be happy to implement this 👍

Magento creates a different directory per locale and runs all the Less processing to generate the CSS files. This is because you can make changes per locale. However my understanding is frequently the only change between locales is in PNG files. That implies redoing Less/Sass etc recompilation per locale is actually a waste of time.

Just wondering how hard to get the tool to compare the input files for one locale to another, and so only do one Less compilation then share with other locales.

(Also open to ideas such as "get the Magento command to do build up directory tree of symlinks to spot such commonality, and symlink output CSS files so its easier for Gulp to see there is only one directory that actually needs processing," or other similar config file.)

We are talking about some of these ideas internally as well, but was curious to see how hard to do at the Gulp end (in which case internal priority might be to make sure Gulp integration in "flip to production" flow is better).

I want to add a PHP Code Sniffer support to watch and check validity of templates live, without using Magento CLI / other ways to trigger them manually.

Check if we have to stick with super old version shipped with M2 - current is 2.6, but M2 use 1.5 (2014)
Same about PHPUnit - current is 5.4, but in M2 we have 4.1 (again 2014)

Links:
https://github.com/sebastianbergmann/phpunit
https://github.com/squizlabs/PHP_CodeSniffer
https://github.com/JustBlackBird/gulp-phpcs

When configuring a theme with lang: sass this errors gets thrown:

$ gulp deploy --theme brusten
[10:01:10] Using gulpfile ~/public_html/tools/gulpfile.js
[10:01:10] Starting 'deploy'...



  [Magento\Framework\Exception\FileSystemException]                                        
  The "/home/brusten.jetfire.tim-online.nl/public_html/" file doesn't exist or not a file  



dev:source-theme:deploy [--type="..."] [--locale="..."] [--area="..."] [--theme="..."] [file1] ... [fileN]


[10:01:13] 'deploy' errored after 3.44 s
[10:01:13] Error: Command failed: ../bin/magento dev:source-theme:deploy --type=sass --locale=nl_NL --area=frontend --theme=Timonline/brusten css/test



  [Magento\Framework\Exception\FileSystemException]                                        
  The "/home/brusten.jetfire.tim-online.nl/public_html/" file doesn't exist or not a file  



dev:source-theme:deploy [--type="..."] [--locale="..."] [--area="..."] [--theme="..."] [file1] ... [fileN]

When using lang:scss I get this message:

$ gulp deploy --theme brusten
module.js:328
    throw err;
    ^

Error: Cannot find module './helpers/scss'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /home/brusten.jetfire.tim-online.nl/public_html/tools/gulpfile.js:26:55
    at Array.forEach (native)
    at /home/brusten.jetfire.tim-online.nl/public_html/tools/gulpfile.js:25:16
    at Array.forEach (native)
    at Object.<anonymous> (/home/brusten.jetfire.tim-online.nl/public_html/tools/gulpfile.js:23:29)
    at Module._compile (module.js:410:26)

Create a test for every gulp task to prevent publishing not working releases.

Hi, I thought I would create an issue here to capture discussion. The one in the M2 GitHub felt like the wrong place for the discussion.

How about to extend this awesome tool with caching ability?
At the moment my gulp needs 6,6 seconds with BrowserSync for 16 LESS files.

To speed up this a bit more would be very nice. :-)

My problem is when i get through to step 4 of running...

gulp setup
I get the following error:

module.js:327 throw err; ^

Error: Cannot find module './helper/sass' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at /Users/andrewjones/Sites/magento2/httpdocs/vendor/snowdog/frontools/gulpfile.js:37:7 at Array.forEach (native) at /Users/andrewjones/Sites/magento2/httpdocs/vendor/snowdog/frontools/gulpfile.js:34:16 at Array.forEach (native) at Object. (/Users/andrewjones/Sites/magento2/httpdocs/vendor/snowdog/frontools/gulpfile.js:32:28) at Module._compile (module.js:409:26)
I don't seem to understand what i'm doing wrong, i've gotten to the point of ripping my hair out.

Not sure what im doing wrong.

It's quite easy, just keeps your dependencies up to date by creating pull requests when new versions are available.
https://greenkeeper.io

Hi,

Lately I have been thinking a lot about how to efficiently compile JavaScript files in a future friendly manner. I've come up with a design and a few basic proofs of concept to satisfy me that it is feasible.

I understand that the focus of this project has hitherto been about Sass and stylesheet compilation, and that there is even a Magento backed effort for this. If you don't think extensive JavaScript support is within the remit of this project, let me know. If you do, and don't have time, then that's fine too, but let me know if you are happy for me to proceed, or not.

Interface

There's not very much to this. From a user's perspective, it's pretty straightforward.

Ideally, a developer can run something like the existing gulp watch command. (This might require the addition of a new flag to enable/disable JavaScript). After running this, it should gather all the source files, similar to how setup:static-content:deploy does now, and park these inside the correct pub/static/ subdirectory.

Then, all changes inside my theme should be picked up, and a minimal rebuild should occur, so that the pub/static/ subdirectory containing my theme and locale is correct.

Implementation

In my mind, there are two key tasks here:

1. Resolving the theme fallback system, so that we know which source file ends up visible on the front-end
2. Doing something when we edit a file in our theme

Resolving the theme fallback system

This links up very closely with #25.

The first thing to do is get a list of what needs to go into pub/static, and in which order. This includes lib/web, all parent themes' web directories, our theme's web directory, all modules' view/base/web/ directories, and all modules' view/{area}/web directories, then all parent themes, then our theme's module web override directories. And we must consider the possibility i18n folders in each of these cases.

This should be resolved once, and put into (taking inspiration from Magento, here) a directory like /var/frontools_preprocessed. These files should all be symlinks to the original files, with no processing (sass, babel, etc) applied.

Once built, this index can basically be left alone, save for a few small cases. The idea is that this directory serves as our root from which to build front-end files that eventually make their way into pub/static/.

Currently, we only have to copy files from there to pub/static, and in the case of .scss files, run sass. But, in the future, it should be possible to transpile, minify, and otherwise process any of our static assets. This approach does not preclude that. Note that there are also some edge cases here, like porting js-translation.json, and building requirejs-config.js. For the former, we should be able to port the same string searching function they employ. Doing requirejs-config.js is simpler, it's essentially just a merge of all the individual requirejs-config.js files in modules, and themes. Order is important, though. Ideally, these would both be watched processes.

Doing something when we edit a file in our theme

Of course, we need to watch our source theme. If we edit a file, we can just work out which builds are affected. If it's sass, we need to recompile, if it's something else, we just need to copy that asset. If we are adding, deleting, or moving a file, we need to update our index described above. Fortunately, our theme is always guaranteed to be on top, so we don't need any kind of debate about whether or not to write a new file. We always do.

Other Things I've been thinking about

• Performance: My initial concern was that performance might be a problem, but I reduced the number of files I would be watching to just the theme.
• Modules: It would be nice to be able to write JavaScript in a module, and have that show up as well. This is a nice to have after an initial implementation, and I'm not going to target it for a first go. Watching everything could be problematic, but it might be feasible to configure individual modules to be included.
• Future: As I hinted above, I am very keen on being able to integrate Babel. I'm not planning this right now, but assuming this will work well enough, I'd like it next.

Running /home/magento/tools# gulp styles --theme uw

[15:58:10] Using gulpfile /home/magento/tools/gulpfile.js
[15:58:10] Starting 'styles'...
[15:58:10] 'styles' errored after 1.94 ms
[15:58:10] TypeError: Cannot read property 'locale' of undefined
    at /home/magento/tools/tasks/styles.js:12:25
    at Array.forEach (native)
    at Object.module.exports.themes.forEach (/home/magento/tools/tasks/styles.js:11:10)
    at module.exports (/home/magento/tools/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/magento/tools/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/magento/tools/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/magento/tools/node_modules/orchestrator/index.js:134:8)
    at /usr/lib/node_modules/gulp/bin/gulp.js:129:20
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

Currently we keep source files directory tree in styles compilation process and this is not so good, because we should remove web folder from the middle of destination path.

Current:
vendor/theme/web/css/custom.scss -> vendor/theme/locale/web/css/custom.css

Correct:
vendor/theme/web/css/custom.scss -> vendor/theme/locale/css/custom.css

I have extended my themes.json with

    "files": [
      "css/styles-m",
      "css/styles-l",
      "css/email", <-- NEW
      "css/email-inline" <-- NEW
    ]

Also new in my theme are these files

/vendor/company/magento2-company-theme-company/web/css/source/_email-extend.less
/vendor/company/magento2-company-theme-company/web/css/source/email.less

_email-extend.less contains

.main-content {
  .email-items {
    thead {
      th {
        background-color: orange;
      }
    }
  }
}

email.less contains
@import (reference) '_email-extend.less';

Now I start

gulp watch --theme company

And ... nothing happens.
What is the correct way to tell gulp to read & compile the _email-extend.less?

I already install frontools and magento-scss-blank-theme for test on windows
i can see folder theme in rootmagento/vendor and rootmagento/tools/tasks
But in find how to compile scss file theme. I already set config in /tools/tasks/configs/theme.json

It's quite easy, just keeps your dependencies up to date by creating pull requests when new versions are available.
https://greenkeeper.io

After fresh installation I was trying to execute gulp setup command, as in tutorial.
Unfortunately, it return error, because plugins, and config consts were undefined.

I successfully executed this command after replacing declarations of those consts with content from gulpfile.js, but now when I'm trying with gulp deploy it also returns following errors:

Previous errors were almost exactly same.
Am I doing something wrong?

Let's check if it's possible to not copy files from vendor info tools and use them from vendor or works on symlinks, to simplify making changes and track them to repository.

First of all, I like the Gulp setup you've made, it's a very solid base. But in my case, this setup is too universal to use with the custom themes I build. Every project is different and so I use different Gulp plugins to get the job done.

For example, I'm not using icon fonts on a current project but instead I use svg files for icons. The plugin I'm using right now is gulpicon. So it would nice if I could integrate this plugin with Frontools without getting out of sync with your git repo. But for a future project, gulp-svgstore might be a better choice because it better fits that specific project. And for other projects I might want to use some other plugins.

So what I'm looking for is a way to use Frontools in combination with some other plugins of choice and the possibility to use a different setup for different projects. Do you think this is even possible at all? And if it is, what do you think this would look like?

Probably files extensions are missing, because @import doesn't need them, unlike LESS.

i see no tools folder, i see a tasks folder?

Connect linting with watching files - we should be able to lint only recently changed files, to not have to dig though enormous output.

go here: http://chef4.dev3.gigasavvy.net/shop/restaurant-equipment and look in the error console. In developer mode it works find with php preprocessing not with this though. am I doing something wrong?

steps

• gulp clean
• gulp deploy --theme chefstoys
• gulp styles --theme chefstoys

• better support of theme partials (nested imports)
• non-styles files support (i.e. fonts)

Would like to clean up our code a bit using one of these coding standards:
https://github.com/rwaldron/idiomatic.js or http://standardjs.com/index.html

I don't have a personal preference at the moment. Have used standard.js before but idiomatic.js seems promising, it's a much broader specification for writing javascript.

Both have support for eslint.

Is it possible to change/disable that function that tries to chmod the styles-l.css & styles-m.css?
Since the last magento 2 update I have this errors when I call
gulp dev --theme banana --maps

gulp-notify: [Error running Gulp] Error: EPERM: operation not permitted, chmod ...

The reason is that these files now belong to
www-data

-rw-rw-r-- 1 www-data www-data 1234 Mai 27 08:06 styles-l.css
-rw-rw-r-- 1 www-data www-data 4321 Mai 27 08:06 styles-m.css

So maybe we can disable that chmod action. Unfortunately I can't find it by myself.

Okay, I have been using it for a bit - some suggested improvements. Creating a separate, clean issue per suggestion.

Here is a theme config I was playing with:

  "kangaroo": {
    "src": "../app/design/frontend/AlanKent/kangaroo",
    "dest": "../pub/static/frontend/AlanKent/kangaroo",
    "locale": ["en_US", "en_AU"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "AlanKent",
    "name": "kangaroo",
    "files": [
      "css/kangaroo2",
      "css/styles-m",
      "css/styles-l",
      "css/email",
      "css/email-inline"
    ]
  },

For the "src" attribute, I am suggesting make it optional, defaulted to "../app/design" + area + "/" + vendor + "/" + name. It will always be this pattern, so why rekey all the details twice? Feels redundant. Or change "src" to just point at app/design only so there is no redundancy.

For the "dest" attribute, do similar - maybe change to "../pub/static" and have the code append area/vendor/name automatically, as that will always be the path structure.

I was always worried of a typing error.

Maybe it's good to combine all installation steps into a gulp setup task. What it will have to do:

• Symlink directory using the current symlink task
• Copy the config json files to: /dev/tools/frontools/configs/themes.json. We will only want to do this when they are not already there

We might ask for the browsersync proxy url to automatically set it.

The gulp clean rule currently does a rm -rf pub/static. The problem is for Apache users there is a .htaccess file in pub/static that is being deleted as well - so after running clean, things stop working. (URL rewrites get turned off.) There is also a _requirejs directory there.

I am not sure what to replace it with - I used to rm -rf the created directories - the opposite of deploy.

Im not sure if its not finding the files or not. Here is my config.

{
  "backend": {
    "src": "../app/design/adminhtml/Magento/backend",
    "dest": "../pub/static/adminhtml/Magento/backend",
    "locale": ["en_US"],
    "lang": "less",
    "default": true,
    "area": "adminhtml",
    "vendor": "Magento",
    "name": "backend",
    "files": [
      "css/styles-old",
      "css/styles"
    ]
  },
  "blank": {
    "src": "../app/design/frontend/Magento/blank",
    "dest": "../pub/static/frontend/Magento/blank",
    "locale": ["en_US", "pl_PL"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "Magento",
    "name": "blank",
    "files": [
      "css/styles-m",
      "css/styles-l",
      "css/email",
      "css/email-inline"
    ]
  },
  "chefstoys": {
    "src": "../app/design/frontend/ChefsToys/default",
    "dest": "../pub/static/frontend/ChefsToys/default",
    "locale": ["en_US"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "ChefsToys",
    "name": "default",
    "files": [
      "css/styles-m",
      "css/styles-l"
    ]
  },
  "luma": {
    "src": "../app/design/frontend/Magento/luma",
    "dest": "../pub/static/frontend/Magento/luma",
    "locale": ["en_US"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "Magento",
    "name": "luma",
    "files": [
      "css/styles-m",
      "css/styles-l"
    ]
  },
  "demo": {
    "src": "../vendor/snowdog/theme-frontend-demo",
    "dest": "../pub/static/frontend/snowdog/demo",
    "locale": ["en_US", "pl_PL", "ru_RU"],
    "lang": "scss",
    "postcss": ["plugins.autoprefixer()"]
  }
}

I was trying to run the code from inside a Docker container, but was having some trouble with browsersync. This is not necessarily a request to change the code, just trying to work out if it can be used inside Docker.

Does browsersync mandate you hard code the host name into the configuration files? What if the host name is not known? (I expand below.)

When I run Docker on Windows I normally use 192.168.99.100 to connect to the container (the IP address of VirtualBox). Inside the container it thinks its address is 172.17.0.2. (Docker does all the network mapping between the two IP addresses.) So external requests come in with a URL of 192.168.99.100, and formed URLs returned by the web server use this same IP address. Otherwise it would not work.

I have Magento 2 installed without specifying --base-url, meaning it will just use the host name of the request. With Docker, I just use the IP address 192.168.99.100 - Magento 2 then injects this as the "hostname" into any responses. It does not need to be told what host name to use. This is convenient as it reduces local configuration to get this going. However...

There is a browsersync 'proxy' setting of 'm2test.dev'. When I type in the URL by hand, it redirects me to m2test.dev (which does not exist on Windows and so fails). I would rather not require the developer to add m2test.dev to their local /etc/hosts file if possible (I am trying to simplify setup by removing steps). But inside the container it is not told about 192.168.99.100. Is there any way around this? Can you get "proxy" mode working without hard coding the hostname to use? E.g. using 0.0.0.0 or similar? As far as I can see it has to know the host name to work.

Also, can I get the default port people normally connect on to be 80? Kitematic (a GUI on the front of Docker) appears to know 80 is HTTP, so fires up a web browser automatically. Port 3000 and 3001 however do not - they open up explorer, probably because it is not sure what type of protocol it is. So I would like to use port 80 inside the docker container instead of 3000 (assuming developers are supposed to access 3000 to get browsersync functionality?) Or is 80 still accessible (without browsersync) and 3000 is with browsersync (and 3001 is the browsersync admin UI)

In case useful, I found this Docker container: https://github.com/ustwo/docker-browser-sync - it talks about adding a hostname.

(a few hours later).... Hmmm. Using "-net=host" in Docker might help a little - now the container knows the IP address. But it would be much better if did not have to specify the host name, and instead it used the hostname from the current URL instead. Can that be done with browser sync do you know?

(even longer later).... http://stackoverflow.com/questions/25410284/gulp-browser-sync-redirect-api-request-via-proxy

Frankly I am just plain confused. I set the proxy to 127.0.0.1 for example, and then hit 192.168.99.100:3000 (the VM). It looks like it redirected me to 192.168.99.100:80 - almost like "I don't think I am meant to proxy that request". Its like its using the setting for both matching in bound requests and where to forward requests too. I want it to proxy everything. I created BrowserSync/browser-sync#984 to see if I get an answer from there.

Using composer it's possible to run post install / update scripts. What's your opinion on this?
https://getcomposer.org/doc/articles/scripts.md

Noting a problem, but not sure how to address it yet.

The magento dev:theme-source:deploy command is used to create a directory tree of symlinks back to the original source code files. Everything works well for Less files in themes.

However, you can also have less files in modules (this never occurs in Magento out of the box). This is so a module can have its own additional styles added via a CSS file. This is for 3rd party extensions in particular.

Currently when you run the above command, it uses an argument of the form "Magento_Customer::foo" to say "foo.less" in the directory of the module Magento_Customer. If you use Magento_Customer/foo the above command currently does not identify the file back with a module (instead it aborts with an error).

The problem with the "::" syntax is "gulp styles" does not compile the 'foo.less' file, because it does understand the concept of "::".

I am not sure if the correct solution is to make the Magento command work out "Magento_Customer" in "Magento_Customer/foo" is a module name, or make the Gulp script understand "::" is special. Without one of these two changes you cannot use this tool with CSS files in modules.

Hello there,

Have just tried to run gulp dev and getting the following error:

/magento2ce/tools/gulpfile.js:44
Object.keys(configs.themes).forEach(name => {
                                          ^
SyntaxError: Unexpected token >
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:193:16)
    at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)
    at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:185:9)

I have generated the config file, PHPSTORM is also picking up on that section as:
Expression statement is not assignment or call

Don't know if anyone else asked this question, but it seems like a bad practice to edit code in your vendor directory. As far as I know composer will say you edited the package every composer update. Also Magento ignores it by default, so you can't get it into git without editing your .gitignore.

For grunt Magento uses PROJECTROOT/dev/tools/grunt/configs/themes.js, so as a solution I was thinking about moving themes.json to PROJECTROOT/dev/tools/frontools/themes.json or something similar.

There might be a valid reason why it has to be in the vendor directory so I'm curious about your thoughts on this.

Run task in my project magento 2. But i can't make it run. Config theme already set up
Did i miss do something?

It should replace // @magento_import

Hi, i'm working with your blank theme and frontools 0.9.3.
In my custom theme i've copied Magento_Checkout/css/source/module/_minicart.scss from vendor/snowdog/theme-blank-sass but if i edit this file i get no result.
So i copied all the css folder from vendor/snowdog/theme-blank-sass/Magento_Checkout ans it started to work.

Is this how it should work or i'm missing something?

Hi,

I'm not sure if this is a bug or just my configuration.
But no matter I try there is no effect in the browser.
I change e.g. a background-color then save my file and I can see in the console, that gulp detects changes:

[14:47:46] Theme: banana Locale: de_DE banana_product_list.css Compiled!
[BS] 1 file changed (banana_product_list.css)
[14:47:54] Theme: banana Locale: de_DE styles-m.css Compiled!
[BS] 1 file changed (styles-m.css)
[14:47:54] Theme: banana Locale: de_DE styles-l.css Compiled!
[BS] 1 file changed (styles-l.css)

After that I see a little tooltip in my browser "inject styles-l.css". I can also register a little flashing in the browser. But then ... nothing happens.
I desperately tried it with !important but again no new background-color.

I also got this error with the standard installation:

gulp-notify: [Error running Gulp] Error: variable @media-common is undefined in file ...

So I had to declare all variables inside each file but I guess that is not the best way.

Maybe it is important but I extend the porto theme with my banana theme.

The themes.json looks like this:

"banana": {
    "src": "../vendor/fruit/magento2-banana-theme-banana",
    "dest": "../pub/static/frontend/Fruit/banana",
    "locale": ["de_DE"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "Fruit",
    "name": "banana",
    "files": [
      "css/styles-m",
      "css/styles-l"
    ]

• compile styles - use #22 + styles task
• copy necessary files from theme directories (remember about inheritance)
• copy necessary files from /lib/web
• build require.js config
• copy and minify(?) html templates
• build js-translation.json

Hey,Where should i put this folder if i not install magento2 frontools via composer?

Can someone provide a sample "browser-sync.json" that actually works?

My JSON looks like this:

{
  "open": "external",
  "host": "banana.tk.local",
  "proxy": "banana.tk.local"
}

But when I start gulp with
gulp dev --theme banana
and BrowserSync opens a new window then Google Chrome ends with

Website is not available ... ERR_CONNECTION_CLOSED

Don't know if we would want to support a package manager. But it's certainly something we can have a look at.

bower.io with wiredep
npmjs.com with browserify, might be some other solution for require.js though.

After rename of configs to config, configuration files stored outside tools directory still keep using configs.