I have multiple themes with sass and a common folder with common options but the files should be compiled each theme css folder. It's a little complicated to explain. I want to share with you the scaffolding. I want to compile this with grunt but I don't know how to do
common_files
sass
common_file.scss
theme_foo
sass
file_one.scss
file_two.scss
css
style.scss
theme_bar
sass
file_one.scss
file_two.scss
css
style.scss
Gruntfile.js
I want to compile each theme with their own sass files and common files in their css folder.
Here is my Gruntfile.js
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
watch: {
sass: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass'],
},
},
sass: {
dist: {
options: {
style: 'expanded', // For compressed use 'compressed'
},
files: [{
expand: true,
cwd: 'sass',
src: ['*.{scss,sass}'],
dest: 'css',
ext: '.css',
},],
},
},
})
/* Load plugins */
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-csslint');
/* Tasks */
// Default task
grunt.registerTask('default', [, 'watch']);
};
Here is a complete solution to your problem :
Update your structure
├── project-dir
│ ├── common
│ │ ├── scss
│ │ │ ├── _button.scss
│ │ │ ├── _form.scss
│ │ │ ├── common.scss
│ ├── theme-foo
│ │ ├── scss
│ │ │ ├── _tag.scss
│ │ │ ├── _figure.scss
│ │ │ ├── theme-foo.scss
│ ├── theme-bar
│ │ ├── scss
│ │ │ ├── _tag.scss
│ │ │ ├── _figure.scss
│ │ │ ├── theme-bar.scss
Use main scss file of each folder (common, theme-foo, theme-bar) to import all its files. And for theme files, import alsocommon.scss` file.
E.g : common.scss file :
#import 'button.scss',
'form.scss';
E.g : theme-foo.scss file :
// import common style
#import 'common.scss';
// import theme style
#import 'tag.scss',
'form.scss';
Now you just have to compile theme-foo.scss and theme-bar.scss with grunt-contrib-sass.
E.g :
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
sass: {
dist: {
files: {
'project-dir/theme-foo/css/theme-foo.css': 'project-dir/**/theme-foo.scss',
'project-dir/theme-bar/css/theme-bar.css': 'project-dir/**/theme-bar.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
};
Take a look sass-guidelines and specially 7-1 pattern to learn a lot of good practices.
Related
I have a react project inside of a folder and I want react-scripts to target and compile from a folder. It looks like this
project
│ README.md
│ package.json
│
└───react
│ │ jsconfig.json
│ │
│ └───src
│ │
│ └───public
│
└───api
│ tsconfig.json
│
└───src
from the project/package.json I want to run react-scripts start and have it compile the /react folder. How can I do this?
I solved the issue with the use off react-app-rewired
See this stackoverflow post on details of how it was done.
const path = require('path');
module.exports = {
paths: function (paths, env) {
paths.appIndexJs = path.resolve(__dirname, 'react/src/index.js');
paths.appSrc = path.resolve(__dirname, 'react/src');
paths.appPublic = path.resolve(__dirname, 'react/public');
paths.appHtml = path.resolve(__dirname, 'react/public/index.html');
return paths;
}
}
I have this directory structure
├── components
│ ├── quarks
│ │ └── index.js
│ │ └── ...
│ ├── bosons
│ │ └── index.js
│ │ └── GridLayout.vue
│ │ └── ...
│ ├── atoms
│ │ └── ButtonStyle.vue
│ │ └── InputStyle.vue
│ │ └── index.js
│ │ └── ...
│ ├── .......
└─────
I'd like to ignore the index.js within each folder, but I'm not getting it, I've tried it in several ways
const path = require('path')
const chokidar = require('chokidar')
const ROOT_PATH = path.resolve('components')
const watcher = chokidar.watch(ROOT_PATH, {
ignored: ROOT_PATH + '/*/index.js', //does not work
ignoreInitial: true
})
already tried:
'./components/**/index.js',
'./components/*/index.js',
'components/*/index.js',
'components/**/index.js',
'ROOT_PATH + '/**/index.js'
Anyone have any idea how to make it work?
The chokidar documentation specifies that the ignored parameter is anymatch-compatiable so this could be completed in many ways.
Here is a regular expression solution...
Any index.js file, even in the root folder:
{
ignored: /(^|[\/\\])index\.js$/,
// ...
}
Only index.js file in a sub-folder:
{
ignored: /[\/\\]index\.js$/,
// ...
}
Also note in your example you use signoreInitial this is not an option, perhaps you meant ignoreInitial?
Alternatively with callback:
{
ignored: (path) => { return path.endsWith('\\index.js') || path.endsWith('/index.js'); },
// ...
}
Chokidar seems bugged, defective to ignore files on MacOS, that's the impression I have.
So before running my action, I'm checking to see if the file is the same one I want to ignore.
chokidar
.watch('components', { ignoreInitial: true })
.on('all', (event, filename) => {
filename !== 'index.js'
// action here
})
What worked for me on Mac was using **:
ignored: ['**/node_modules'],
So if the other options don't work because of bugs, go for this one:
ignored: ['**/index.js'],
I want to search recursively and find if I'm using a certain Node module. Is this possible?
If you mean not at runtime you can do:
npm ls <module name to search for>
For example:
$ npm ls async
/Users/justin/code/example
├─┬ aws-cdk#0.19.0
│ └─┬ archiver#2.1.1
│ └── async#2.1.4 deduped
├─┬ mongooster#6.0.2
│ └─┬ mongoose#5.3.5
│ └── async#2.6.1
└─┬ sqs-consumer#3.8.0
└── async#2.1.4
At runtime you can use require.resolve
> require.resolve('async')
'/Users/justin/code/example/node_modules/async/dist/async.js'
Or you can require the module then look in the cache to get details about the module, including its parent chain.
> require.cache[require.resolve('async')]
Module {
id: '/Users/justin/code/example/node_modules/async/dist/async.js',
exports: { ... },
parent: Module { ... },
filename: '/Users/justin/code/example/node_modules/async/dist/async.js',
loaded: true,
children: [],
paths: [ ... ]
}
I have seen all the posts pointing to various guides purporting to get ABS working with IntelliJ (Android Studio), including here, and here.
For the most recent version of ABS and AS, they don't work.
Generally, the tutorial doesn't match the IDE. Getting past that, and assuming that doing an 'import module' using gradle instead of maven is allowed, I eventually get:
Plugin with id 'android-library' not found
Does anyone have a tutorial for getting the latest version of ABS working with the latest version of AS?
Fwiw, I tried going the Eclipse route with the intention of exporting and then trying to bring it into AS (this is definitely not my preferred path), but I ended-up getting a bunch of "Unable to execute dex: Multiple dex files define..." errors surrounding Jackson.
If it's useful, here is my build.gradle, but my preferred solution would use more "standard" mechanisms than mucking with that and would also, then, more likely be useful to others. Here's the file:
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:0.5.+'
}
}
apply plugin: 'android'
dependencies {
compile fileTree(dir: 'libs', include: '*.jar')
}
android {
compileSdkVersion 17
buildToolsVersion "17.0.0"
sourceSets {
main {
manifest.srcFile 'AndroidManifest.xml'
java.srcDirs = ['src']
resources.srcDirs = ['src']
aidl.srcDirs = ['src']
renderscript.srcDirs = ['src']
res.srcDirs = ['res']
assets.srcDirs = ['assets']
}
instrumentTest.setRoot('tests')
}
}
And, my project directory structure:
D:.
└───T-n-T
├───.gradle
│ └───1.6
│ └───taskArtifacts
├───.idea
│ ├───copyright
│ ├───libraries
│ └───scopes
├───assets
├───bin
│ ├───classes
│ │ └───com
│ │ └───pha
│ │ └───t-n-t
│ │ ├───models
│ │ └───services
│ └───res
├───build
│ ├───apk
│ ├───assets
│ │ └───debug
│ ├───classes
│ │ └───debug
│ │ └───com
│ │ └───pha
│ │ └───t-n-t
│ │ ├───models
│ │ └───services
│ ├───dependency-cache
│ │ └───debug
│ ├───incremental
│ │ ├───aidl
│ │ │ └───debug
│ │ ├───dex
│ │ │ └───debug
│ │ ├───mergeAssets
│ │ │ └───debug
│ │ └───mergeResources
│ │ └───debug
│ ├───libs
│ ├───manifests
│ │ └───debug
│ ├───res
│ │ ├───all
│ │ │ └───debug
│ │ │ ├───drawable-hdpi
│ │ │ ├───drawable-mdpi
│ │ │ ├───drawable-xhdpi
│ │ │ ├───drawable-xxhdpi
│ │ │ ├───layout
│ │ │ ├───menu
│ │ │ ├───values
│ │ │ ├───values-sw720dp-land
│ │ │ ├───values-v11
│ │ │ ├───values-v14
│ │ │ └───xml
│ │ └───rs
│ │ └───debug
│ ├───source
│ │ ├───aidl
│ │ │ └───debug
│ │ ├───buildConfig
│ │ │ └───debug
│ │ │ └───com
│ │ │ └───pha
│ │ │ └───t-n-t
│ │ ├───r
│ │ │ └───debug
│ │ │ └───com
│ │ │ └───pha
│ │ │ └───t-n-t
│ │ └───rs
│ │ └───debug
│ └───symbols
│ └───debug
├───gen
│ └───com
│ └───pha
│ └───t-n-t
├───gradle
│ └───wrapper
├───libs
├───res
│ ├───drawable-hdpi
│ ├───drawable-ldpi
│ ├───drawable-mdpi
│ ├───drawable-xhdpi
│ ├───drawable-xxhdpi
│ ├───layout
│ ├───menu
│ ├───values
│ ├───values-sw600dp
│ ├───values-sw720dp-land
│ ├───values-v11
│ ├───values-v14
│ └───xml
└───src
└───com
└───pha
└───t-n-t
├───models
└───services
It should be noted that this represents the project after having rolled it back after a failed attempt to get this working.
UPDATE
I don't know if it's progress, but it's different. I have what I think is the library project from ABS sitting with my main project, and added as a module. I think this is the case because in the IDE, in the main project, SherlockActivity seems to be available. I can extend it (sort of) and can import it's namespace (com.actionbarsherlock.app). I say sort of because everything is fine until I try to build, at which point I get:
Gradle: package com.actionbarsherlock.app does not exist
Gradle: cannot find symbol class SherlockActivity
and the build fails. So something is clearly not quite right.
Any suggestions?
SOLVED
Wow. What a pain. What I ultimately ended-up doing:
As described by others
1) Download and extract ABS
2) Save it in its own folder under your primary project (say ActionBarSherlock)
3) Import it as a Module (new: use Maven / pom.xml - make sure Export is checked)
Pulled from other sources
4) Exclude the ActionBarSherlock/target directory (Open Module Settings)
5) If your primary project uses the support library, change that dependency to Provided (Open Module Settings)
Again, I'm not sure why this was so difficult, or if I've done it correctly, or that there aren't any issues yet to be found (I have an empty Activity which extends SherlockActivity, it does build, and I can deploy it to, and run it on, an emulator), but there you go.
For me the following works fine :
Copy the actionbarsherlock directory to your project root to have
MyAppProject
|-actionbarsherlock
|--build.gradle
|-MyApp
|--build.gradle
|-build.gradle
|-settings.gradle
build.gradle of actionbarsherlock
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:0.5.+'
}
}
apply plugin: 'android-library'
dependencies {
compile 'com.android.support:support-v4:18.0.+'
}
android {
compileSdkVersion 17
buildToolsVersion '17.0.0'
sourceSets {
main {
manifest.srcFile 'AndroidManifest.xml'
java.srcDirs = ['src']
resources.srcDirs = ['src']
res.srcDirs = ['res']
}
}
}
build.gradle of MyApp
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:0.5.+'
}
}
apply plugin: 'android'
repositories {
mavenCentral()
}
dependencies {
compile 'com.android.support:support-v4:18.0.+'
compile project(':actionbarsherlock')
}
android {
compileSdkVersion 17
buildToolsVersion "17.0.0"
defaultConfig {
minSdkVersion 10
targetSdkVersion 17
}
}
settings.gradle
include ':MyApp', ':actionbarsherlock'
and nothing in the MyAppProject build.gradle
Next Right clik on your MyAppProject > Open Module settings
And on the module section import module and select actionbarsherlock directory. Apply
and to verify re open modul settings, go Modules, click on YourApp and verify if on the dependencies you have actionbarsherlocj on scope compile. if yes, you are ready .
From my update to the question, above:
What I ultimately ended-up doing:
As described by others
1) Download and extract ABS
2) Save it in its own folder under your primary project (say, ActionBarSherlock)
3) Import it as a Module (new: use Maven / pom.xml - make sure Export
is checked)
Pulled from other sources
4) Exclude the ActionBarSherlock/target directory (Open Module
Settings)
5) If your primary project uses the support library, change that
dependency to Provided (Open Module Settings)
Again, I'm not sure why this was so difficult, or if I've done it correctly, or that there aren't any issues yet to be found (I have an empty Activity which extends SherlockActivity, it does build, and I can deploy it to, and run it on, an emulator), but there you go.
UPDATE
This configuration ended up not working. How or why it fell apart, I don't know. But after restarting AS, it fell apart. Following the steps here - again - did, this time, get it working.
This is my configure file:
The layout.jade does not seem to be working. But the jade is working. I used Chrome to check, and am sure that the layout HTML is not loaded into the page.
module.exports = function(app, express, mongoose){
var config=this
app.configure(function (){
app.set('views',__dirname+'/views')
app.set('view engine','jade')
app.set('view options', {layout:true})
app.use(express.bodyParser())
app.use(express.methodOverride())
app.use(express.cookieParser())
app.use(express.session({secret: 'topsecret',store: new express.session.MemoryStore}))
app.use(express.static(app.path.join(app.application_root,"public")))
app.use(express.errorHandler({dumpExceptions:true,showStack:true}))
app.use(express.bodyParser({keepExtensions: true, uploadDir:"./public/uploads"}))
app.use(app.router)
})
/*DB part:*/
app.mongoose.connect('mongodb://localhost/dio_database')
return config
}
The render command:
app.get('/items/:id',function(req,res){
models.ItemModel.findOne({_id:req.params.id}).exec(function(err,item){
if (!err){
res.render('item.jade',item)
} else
return console.log(err)
})
})
My layout.jade, quite simple:
!!!
doctype 5
html
head
title "Dio"
link(rel='icon', href='favicon.ico', type='image/x-icon')
link(rel='shortcut', href='favicon.ico', type='image/x-icon')
link(rel="shortcut", href="favicon.ico", type="image/vnd.microsoft.icon")
link(rel="icon", href="favicon.ico", type="image/vnd.microsoft.icon")
script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js")
script(src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js")
script(src="./javascripts/underscore-min.js")
script(src="./javascripts/backbone-min.js")
link(rel='stylesheet', href='./css/main.css', type="text/css", media="screen")
body
div#topbar Dio--where shitty thing happens
div#main!= body
footer
p
| Node.js MVC template by XXX
And the following is my npm list:
├─┬ bcrypt#0.7.3
│ └── bindings#1.0.0
├─┬ express#3.0.3
│ ├── commander#0.6.1
│ ├─┬ connect#2.7.0
│ │ ├── bytes#0.1.0
│ │ ├── formidable#1.0.11
│ │ ├── pause#0.0.1
│ │ └── qs#0.5.1
│ ├── cookie#0.0.5
│ ├── cookie-signature#0.0.1
│ ├── crc#0.2.0
│ ├── debug#0.7.0
│ ├── fresh#0.1.0
│ ├── methods#0.0.1
│ ├── mkdirp#0.3.3
│ ├── range-parser#0.0.4
│ └─┬ send#0.1.0
│ └── mime#1.2.6
├── fs#0.0.0
├── imagemagick#0.1.3
├─┬ jade#0.27.7
│ ├── coffee-script#1.4.0
│ ├── commander#0.6.1
│ └── mkdirp#0.3.4
├─┬ mongodb#1.2.2
│ └── bson#0.1.5
├─┬ mongoose#3.4.0
│ ├── hooks#0.2.1
│ ├─┬ mongodb#1.1.11
│ │ └── bson#0.1.5
│ ├── ms#0.1.0
│ └── sliced#0.0.3
├─┬ node-static#0.6.5 extraneous
│ ├── colors#0.6.0-1
│ └─┬ optimist#0.3.5
│ └── wordwrap#0.0.2
└── path#0.4.9
Actually the reason for such problem is quite simple:
Express 3 no longer supports layout..But do not be sad. Actually Express 3 begins to adopt a more natural and easier way, which is called block/extends.
The basic usage should be like this:
// In layout file: layout.jade
html
head
title XXX
block scripts
body
block content
block footer
// in a extended file, for example index.jade:
extends layout
block scripts
//write javascript part
block content
// write content
block footer
// write the footer
It actually becomes easier and more flexible. Glad to get it finally. But it took me more than 2 hours.
I am just wondering why so few people mentioned this change more clearly and openly. Hope this post can help some people like me.