So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?
Related
I know the question is broad but at this point I'm not necessarily sure how to specify it. I am currently working on a Laravel/Vue project, and I want to create an extracted module that will eventually be an NPM package. The reason I want to extract it is because I will use this chunk of code as a mixin within various Vue components.
I want to do this all locally so that I don't have to continuously mess with NPM, so I set up the link between my project and my module via the npm link command. I can confirm in my Project that there is a symbolic link directory in the node_modules directory, pointing to my Module.
In my Project, I have the code from the mixin executing a function inside another method of my Vue component, like so:
this.updateState(response.state);
I am importing and defining the mixin in that file like so:
import UpdatesState from 'module';
export default {
mixins: [UpdatesState],
This updateState method is defined in my Module. Inside my Module, here is what my module/src/mixins/UpdateState file looks like:
export default {
methods: {
updateState(state) {
this.$store.commit('state', state);
}
},
}
Also in the Module, I have an index.js file that looks like this:
import UpdatesState from './mixins/UpdatesState'
export default {
UpdatesState
}
My Module's package.json looks like this:
{
"name": "module",
"description": "Supporting modules",
"main": "src/index.js",
"author": "Hoolakoola",
"license": "MIT"
}
When I was running this code from within the actual source of the Project and just referencing it by its absolute path, it was working fine. But now that I am trying to extract it, it is not working properly. I am not getting any errors when compiling the Project, and there are no errors in the console. Any idea what is going wrong here and how I can fix it? Thank you.
I'm new to webpack in Laravel. I already managed to compile the default scripts into one. However, when I tried to add a new Vue Controller in a separate folder, it seems it will not be included during npm run dev.
Currently I have this set-up
-assets
--js
---app.js
---test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/test.vue'
], 'public/js/app.js');
This will work. However when I put test.vue inside a folder.
-assets
--js
---app.js
--controllers
--test.vue
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/controllers/test.vue'
], 'public/js/app.js');
However, when I changed it from test.vue to test.js it will compile. Does the file extension matter? when compiling mix.js?
Can someone help me out on this? Thanks!
If i am not mistaken you can't compile single .vue files using webpack without some sort of loader
Using Vue.component() and importing a vue file into a .js file and then compiling the .js will work.
This might be of help: https://github.com/vuejs/vue-loader
Vue Single-File Component (SFC) Spec
A *.vue file is a custom file format that uses HTML-like syntax to
describe a Vue component. Each *.vue file consists of three types of
top-level language blocks: , , and , and
optionally additional custom blocks:
vue-loader will parse the file, extract each language block, pipe them
through other loaders if necessary, and finally assemble them back
into an ES Module whose default export is a Vue.js component options
object.
I want to install a package into my local project.For that I'm creating a composer.json file in my project folder is given below, it gives the total vendor folder of that package into my custom folder in my project. Its working fine.....
{
"config": {
"vendor-dir": "/var/www/html/Test2/Testing/Down"
},
}
It gives the package into 'Down' folder.
But, now I want the sub folders or files in that packages to be installed in my custom folders like js/css folders in my project.
For example i want jquery.js file into my local folder path
/var/www/html/Test2/Testing/assests/js
From the package "frameworks/jquery".
For that, what changes are needed in my composer.json file?
Composer is used to bring in packages to support the PHP code of a project, here is how they describe it on the Composer website:
Composer is a tool for dependency management in PHP. It allows you to
declare the libraries your project depends on and it will manage
(install/update) them for you.
In other words, if you need to do logging in your PHP code and decide to use the publicly available monolog package, you use composer to bring that package into your project, then in your PHP code, you can call monolog functions.
Using config to rename the vendor directory is trying to use Composer in a way that doesn't fit the intent of the tool. The vendor directory is used to hold the packages brought in (such as the monolog code). The vendor-dir value is simply renaming that directory.
Since you have GitHub listed as a tag, you could possibly use cloning to get your files to your website directory.
I've modified my composer.json file, it looks like the below:
{
"config": {
"vendor-dir": "/var/www/html/Test2/Testing/Down"
},
"require": {
},
"scripts": {
"post-package-install": [
"php -r \"exec('cp -r /var/www/html/Test2/Testing/Down/frameworks/jquery/* /var/www/html/Test2/Testing/assets/js');\""
]
}
}
It will gives all selected files in a package to my local folder.
Briefly the files in the folder 'frameworks/jquery' are copied into my local 'assets/js' folder.
I'm currently using css-loader, node-sass, sass-loader and style-loader packages within webpack to compile my sass files, here is how my loader looks at the moment:
{
test: /\.scss$/,
loader: 'style!css!sass'
}
I want to use folder structure like this for my styles
styles
components/
main.sass
and somehow within main.sass I want to import everything from components folder so something like #import './components/**/*' is this possible via webpack?
You can prefix a Sass import with '~' to tell the Sass loader to use webpack's require() resolution on the import. Once webpack is in charge of the import you have some flexibility.
If you do a dynamic require, e.g. require('~./components/' + someVar + '.scss'), webpack can't evaluate the variable at build time and it bundles all the possible files in that directory, and the actual resolution of the require() happens at runtime (which can lead to errors at runtime if you've asked for something that doesn't exist). Not sure off the top of my head if that would give you what you need (all the files bundled) or if you would still need to explicitly require() each partial -- but if that's the case you could easily loop through all the files in the directory and require each one.
More on how you can leverage webpack's dynamic requires and loading context.
I am building a simple NativeScript app, and am trying to do it using a TypeScript base code.
I am using Sublime Text 3 under OSX.
I realized by looking at the demo apps that the tns_modules matches the NativeScript repository so I added it to my app/ folder as a Git submodule, and then compiled it (npm i && grunt). Is that the wrong way to integrate these modules?
I then realized that I could not just run a tns emulate android of my app made of .ts files: I had to compile them too. So I set up a Grunt task to do so, but it was not easy to handle the dependencies. I ended up with this Gruntfile.coffee in app/:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-typescript'
grunt.config 'typescript',
build:
src: [
'**/*.ts'
'!*_modules/**'
]
options:
references: [
'tns_modules/bin/dist/definitions/**/*.d.ts'
]
target: 'es5'
sourceMap: false
declaration: false
module: 'commonjs'
noResolve: true
And it works with simple code, e.g. I'm able to extend a module like Observable by writing:
import observable = require("data/observable");
class Activities extends observable.Observable {
//...
}
I then compile with grunt (the .js files are created along with the .ts ones) and run with tns emulate android (with Genymotion emulator).
Is it the right architecture for my development? When I use Telerik Platform, the compilation process is hidden so I'm not sure I'm doing it right.
And now I'm trying to use Telerik's side-bar module directly in a page's XML file, the way they do it:
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:tsb="./tns_modules/bin/dist/apps/TelerikNEXT/TelerikUI/side-bar">
<tsb:SideBar title="MyApp">
...
But I get this error:
E/TNS.Native( 2456): TypeError: Cannot read property 'android' of undefined
E/TNS.Native( 2456): File: "/data/data/org.nativescript.scmobile/files/app/./tns_modules/bin/dist/apps/TelerikNEXT/TelerikUI/side-bar, line: 39, column: 39
Which corresponds to:
this._android = new com.telerik.android.primitives.widget.sidedrawer.RadSideDrawer(this._context);
Any idea how I should include these modules? Note that I'm new to mobile dev.
The sidebar, which they're using in the example, is a (payed) controller from Telerik.
As such, it needs to be downloaded and added with tns library add {ios|android} /path/to/the/sidebar.
This command will read project.properties file from the specified shared library folder and will add a reference to it in your project. If in turn the shared library has references to other projects then these projects will be included recursively. As a result, this will create a new folder lib which is sibling to already existing app and platforms.
http://docs.nativescript.org/runtimes/android/external-libs/resource-libs