I would like to add an entire folder of files to my package. Instead of adding each file individually, is it possible to add an entire folder of files using api.add_files in the package.js file? Perhaps something like:
Package.on_use(function(api) {
api.add_files(["files/*","client");
});
I don't think there's something like that currently in the public API.
However, you can use plain old Node.JS to achieve what you want to do.
Our package structure looks like this :
/packages/my-package
|-> client
| |-> nested
| | |-> file3.js
| |-> file1.js
| |-> file2.js
|-> my-package.js
|-> package.js
We build a helper function as follow :
function getFilesFromFolder(packageName,folder){
// local imports
var _=Npm.require("underscore");
var fs=Npm.require("fs");
var path=Npm.require("path");
// helper function, walks recursively inside nested folders and return absolute filenames
function walk(folder){
var filenames=[];
// get relative filenames from folder
var folderContent=fs.readdirSync(folder);
// iterate over the folder content to handle nested folders
_.each(folderContent,function(filename){
// build absolute filename
var absoluteFilename=folder+path.sep+filename;
// get file stats
var stat=fs.statSync(absoluteFilename);
if(stat.isDirectory()){
// directory case => add filenames fetched from recursive call
filenames=filenames.concat(walk(absoluteFilename));
}
else{
// file case => simply add it
filenames.push(absoluteFilename);
}
});
return filenames;
}
// save current working directory (something like "/home/user/projects/my-project")
var cwd=process.cwd();
// chdir to our package directory
process.chdir("packages"+path.sep+packageName);
// launch initial walk
var result=walk(folder);
// restore previous cwd
process.chdir(cwd);
return result;
}
And you can use it like this :
Package.on_use(function(api){
var clientFiles=getFilesFromFolder("my-package","client");
// should print ["client/file1.js","client/file2.js","client/nested/file3.js"]
console.log(clientFiles);
api.add_files(clientFiles,"client");
});
We simply use Node.JS fs utils to work with the file system.
Related
I'm working with the newest version of Edge (Canary release 86.0.615.0) and I can get the new Native File System API showOpenFilePicker to let me access files but I can't find a reference to the directoryHandle functions including the removeEntry function if the user elects to remove the file. Am I missing a special flag? I have an Origin-Tracker code and I also have the experimental flag set for the Native File System API.
If you have a directory handle, you can delete files or folders as in the example below:
// Delete a file.
await directoryHandle.removeEntry('Abandoned Projects.txt');
// Recursively delete a folder.
await directoryHandle.removeEntry('Old Stuff', { recursive: true });
You can obtain a directory handle from the picker:
const directoryHandle = await window.showDirectoryPicker();
To iterate over the entries of a directory, you can use the code snippet below:
for await (const entry of directoryHandle.values()) {
console.log(entry.kind, entry.name);
}
I have a folder structure like this (simplified):
|-project1
|--_file1.scss
|--_file2.scss
|--_file3.scss
|
|-project2
|--_file2.scss
|
|-css
|--project1.css
|--project2.css
I am looking for a way to compile the sass files with inheritance. The idea behind this is, that I have a base project (project1) and project 2 only contains those files that need to be changed.
So upon compilation gulp should render 2 css files:
project1.css
This contains only the files from project1/scss/ folder
project2.css
This one should contain file1 and file3 from project 1 and file2 from project 2.
Is this possible? What modules would be needed?
Thank you
Here is something that should work for you. I note that you have all and only partials in your project folders, i.e. _file1.scss, _file2.scss, etc. You will have to have at least one file that is not a partial that imports those partials for sass to work.
const gulp = require('gulp');
const fs = require('fs');
const path = require('path');
const filter = require('gulp-filter');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const addsrc = require('gulp-add-src');
// const glob = require("glob");
const sources = ['project1', 'project2', 'project3'];
// could glob your sourceFolders with something like
// const sources = glob.sync("project*");
const filterSources = Object.keys(sources);
function isUnique(file, index) {
console.log(path.basename(file.path)); // file1.scss, file2.scss, etc. all from project1
baseName = path.basename(file.path);
folder = sources[index]; // project
// does that basename exist in thecurrent project (sources[index] )
return !fs.existsSync(folder + path.sep + baseName);
}
gulp.task('default', function () {
// loop through all the project folders
filterSources.forEach(function (project, index) {
const f = filter(function (file) {
return isUnique(file, index);
});
// always using project1 files as basis
const stream = gulp.src('./project1/*.scss')
// filter out from the source stream (project1 files) any files that appear in the current project directory
.pipe(f)
// add all files from the current project directory, i.e., project2, project3, etc.
.pipe(addsrc.append('./' + sources[index] + '/*.scss'))
.pipe(sass().on('error', sass.logError))
// give the concat the filename of the current project
.pipe(concat(sources[index] + '.css'))
.pipe(gulp.dest('css'));
return stream;
});
This works for any number of project folders, just make sure that your non-partial scss file that imports the others is not one that is filtered out.
But it looks like you don't really want any partials anyway since you want to concat all files in each project so remove those leading underscores from each file name.
My project uses Bower to install deps and Grunt to build. My project tree looks like this
|
|-bower_components
| |
| |-jquery
| |-semantic
| |-...
|-Bower.json
|-Gruntfile.js
|-public
| |
| |-css // Compiled, concatenated and minified semantic-ui
| |-js // and other libs should be here
|-...
|-etc..
Is it possible to build custom semantic-ui (ie customize fonts, colors, remove unused components) using Grunt (or maybe using Gulp called from Grunt)?
Where to place semantic theme config and overrides files?
It's not difficulty to use grunt to build semantic-ui. I don't know about bower, but this is how I did it.
Install grunt-contrib-less.
Create a new directory somewhere in your project, e.g. '/less/semantic'. Copy 'site' directory from your semantic packagea, i.e. 'bower_components/semantic/src/site' to the new directory. All your overrides will be done here.
Create a config.json file in '/less/semantic' to configure what components you want to be included in your build. The file content will be something like this:
{
"elements": ["button", "divider"],
"collections": ["form"],
"modules": ["checkbox"]
}
Add following to your gruntFile.js file:
var fs = require('fs');
// Defines files property for less task
var getSemanticFiles = function() {
var files = {};
var config = JSON.parse(fs.readFileSync('less/semantic/config.json'));
var srcDir = 'bower_components/semantic/definitions/';
var outputDir = 'less/semantic/output/';
for (var type in config) {
config[type].forEach(function(ele) {
files[outputDir + type + '.' + ele + '.output'] = [srcDir + type + '/' + ele + '.less'];
});
}
return files;
};
Configure less task as following:
less: {
semantic: {
options: { compile: true }
files: getSemanticFiels()
},
dist: {
options: { compile: true }
files: { 'public/css/semantic.css': ['less/semantic/output/*'] }
}
}
Edit theme.config in 'bower_components/semantic/src', change #siteFoler to '../../../less/site/', and make any additional changes as needed per semantic document.
You run grunt less:semantic to compile all needed components, and then run less:dist to put them into a single css file.
Of course you can configure a watch task to automate the process. Then every time you make a change, the css will be automaticly re-built.
I am sure someone will build a grunt build to semantic one day, but for now, I just use this to call all the gulp commands using grunt. https://github.com/sindresorhus/grunt-shell. Just make sure you are calling the gulp build task and not the default gulp task. It has a watch task that will cause grunt to not finish the shell task.
How can I list all files inside a folder with Meteor.I have FS collection and cfs:filesystem installed on my app. I didn't find it in the doc.
Another way of doing this is by adding the shelljs npm module.
To add npm modules see: https://github.com/meteorhacks/npm
Then you just need to do something like:
var shell = Meteor.npmRequire('shelljs');
var list = shell.ls('/yourfolder');
Shelljs docs:
https://github.com/arturadib/shelljs
The short answer is that FS.Collection creates a Mongo collection that you can treat like any other, i.e., you can list entries using find().
The long answer...
Using cfs:filesystem, you can create a mongo database that mirrors a given folder on the server, like so:
// in lib/files.js
files = new FS.Collection("my_files", {
stores: [new FS.Store.FileSystem("my_files", {"~/test"})] // creates a ~/test folder at the home directory of your server and will put files there on insert
});
You can then access this collection on the client to upload files to the server to the ~test/ directory:
files.insert(new File(['Test file contents'], 'my_test_file'));
And then you can list the files on the server like so:
files.find(); // returns [ { createdByTransform: true,
_id: 't6NoXZZdx6hmJDEQh',
original:
{ name: 'my_test_file',
updatedAt: (Date)
size: (N),
type: '' },
uploadedAt: (Date),
copies: { my_files: [Object] },
collectionName: 'my_files'
}
The copies object appears to contain the actual names of the files created, e.g.,
files.findOne().copies
{
"my_files" : {
"name" : "testy1",
"type" : "",
"size" : 6,
"key" : "my_files-t6NoXZZdx6hmJDEQh-my_test_file", // This is the name of the file on the server at ~/test/
"updatedAt" : ISODate("2015-03-29T16:53:33Z"),
"createdAt" : ISODate("2015-03-29T16:53:33Z")
}
}
The problem with this approach is that it only tracks the changes made through the Collection; if you add something manually to the ~/test directory, it won't get mirrored into the Collection. For instance, if on the server I run something like...
mkfile 1k ~/test/my_files-aaaaaaaaaa-manually-created
Then I look for it in the collection, it won't be there:
files.findOne({"original.name": {$regex: ".*manually.*"}}) // returns undefined
If you just want a straightforward list of files on the server, you might consider just running an ls. From https://gentlenode.com/journal/meteor-14-execute-a-unix-command/33 you can execute any arbitrary UNIX command using Node's child_process.exec(). You can access the app root directory with process.env.PWD (from this question). So in the end if you wanted to list all the files in your public directory, for instance, you might do something like this:
exec = Npm.require('child_process').exec;
console.log("This is the root dir:");
console.log(process.env.PWD); // running from localhost returns: /Users/me/meteor_apps/test
child = exec('ls -la ' + process.env.PWD + '/public', function(error, stdout, stderr) {
// Fill in this callback with whatever you actually want to do with the information
console.log('stdout: ' + stdout);
console.log('stderr: ' + stderr);
if(error !== null) {
console.log('exec error: ' + error);
}
});
This will have to run on the server, so if you want the information on the client, you'll have to put it in a method. This is also pretty insecure, depending on how you structure it, so you'd want to think about how to stop people from listing all the files and folders on your server, or worse -- running arbitrary execs.
Which method you choose probably depends on what you're really trying to accomplish.
What is the best way for recursively directory removing with Meteor ?
Use an existing npm module like rimraf. Here's how you do it starting from an empty project:
$ meteor add meteorhacks:npm meteorhacks:async
$ meteor
Once meteor starts, stop it and edit packages.json to look like:
{
"rimraf": "2.2.8"
}
Then add something like this in a file under your server directory:
var removeDirectory = Async.wrap(Meteor.npmRequire('rimraf'));
Meteor.startup(function() {
removeDirectory('/dir/to/remove');
});
Where /dir/to/remove is, you guessed it, the directory you want to recursively remove.
Here's how I do it (in CoffeeScript):
fs = requre('fs')
_emptyDirectory = (target) ->
_rm(path.join(target, p)) for p in fs.readdirSync(target)
_rm = (target) ->
if fs.statSync(target).isDirectory()
_emptyDirectory(target)
fs.rmdirSync(target)
else
fs.unlinkSync(target)