Gulp creates empty folder in dist for ignored directory - directory

I'm excluding the content of the directories in gulp.src using the ! symbol, but the directories themselves are still included, for example:
gulp.src(["./src/**", "!./src/pages/**"], { base: "./src/" })
.pipe(gulp.dest("./dist/"))
outputs
dist ->
pages
but I don't want the directory pages. Any idea?

Exclude the directory explicitly:
gulp.src(["./src/**", "!./src/pages", "!./src/pages/**"], { base: "./src/" })
.pipe(gulp.dest("./dist/"))
Alternatively you can also use brace expansion:
gulp.src(["./src/**", "!./src/pages{/**,}"], { base: "./src/" })
.pipe(gulp.dest("./dist/"))

Related

How to get outputs of one Rule item as inputs of another one?

I want to create automatic crossplatform installation builder for my project. For this reason I made this file myprojectpackage.qbs:
Product {
type: "mypackage"
Depends { name: "myproject" } // <- this one has type "application"
Depends { name: "applicationpackage" }
}
applicationpackage.qbs uses some submodules and looks like:
Module {
name: "applicationpackage"
Depends { name: "qtlibsbinariespackage" }
Depends { name: "3rdpartybinariespackage" }
Depends { name: "resourcepackage" }
}
All these modules try to find something and copy to package directory. After they finish, I have a folder with a portable version of application. Every module of this group have typical structure:
Module {
name: "somepackage"
Rule {
condition: qbs.targetOS.contains("windows")
multiplex: true
alwaysRun: true
inputsFromDependencies: ["application"]
Artifact {
filePath: "Copied_files.txt"
fileTags: "mypackage"
}
prepare: {
var cmdQt = new JavaScriptCommand()
// prepare paths
cmdQt.sourceCode = function() {
// copy some files and write to Copied_files.txt
}
return [cmdQt]
}
}
}
After portable folder package complete, I want to make a zip archieve. So, I need another Module, which will run after package modules. I think, that only way to do like this is taking .txt files, that were created by modules in applicationpackage, as inputs for another Rule.
I have tried a lot of things (FileTaggers, outputFileTags etc.), but noone worked properly. So is there any way to do make modules work in pipeline as I want to do?
Do I understand correctly that you want to "merge" the contents of the txt files tagged "mypackage" into the archive, i.e. everything listed in all the files is supposed to end up there?
If so, then you simply need a "top-level" rule that does the aggregation. Your existing rules would tag their outputs as e.g. "mypackage.part" and then a multiplex rule would take these as inputs and create a "mypackage" artifact.
Note that there is the archiver module (https://doc.qt.io/qbs/archiver-module.html) that can do the final step of creating the package for you from the aggregated txt file.

Stylelint - Ensure class name prefix matches folder name

I am using the "selector-class-pattern" stylelint rule. The pattern I am using is to enforce the ECSS naming standard. The rule looks like this:
"selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z][a-zA-Z0-9]+)?(-([a-z0-9-]+)?[a-z0-9])?$", { "resolveNestedSelectors": true }]
An ECSS class name uses 3 parts (module name, component name, element name) and looks something like .mod-Component_Element {} where mod is an abbreviation of the module name.
My SCSS files are kept in component folders, so the folder structure looks like the below, where app is the name of the module.
app
-- component-name
-- component-name.component.js
-- component-name.component.scss
I would like a stylelint rule to ensure that the module and the component part of class names match the folder they are in. So the class names kept in the example component-name.component.scss file would be restricted to .app-ComponentName_ElementName {} where ElementName is optional and can be anything.
I am using Gulp to run stylelint:
gulp.task('css', () => {
let processors = [
// add postcss processors here
];
return gulp.src([
path.join(gconfig.rootDir, 'vars.style.scss'),
path.join(gconfig.rootDir, 'style.scss'),
path.join(gconfig.rootDir, gconfig.rootModule, '**/*.scss'),
])
.pipe(stylelint({
failAfterError: false,
reporters: [ {formatter: 'string', console: true} ]
}))
.pipe(gif( debug, sourcemaps.init() ))
.pipe(cssimport())
.pipe(concat(`${gconfig.projectName}.style.css`))
.pipe(scss().on('error', scss.logError))
.pipe(postcss(processors))
.pipe(gif( debug, sourcemaps.write() ))
.pipe(gulp.dest(path.join(gconfig.outDir, 'css')))
});
I understand I will probably need to write a plugin for this, but wondered if there is already a plugin for something like this out there, or if there are any ways to do it maybe by passing the file name/folder to stylelint from Gulp?
I've not seen anything that does what you're asking out of the box
The closest similar plugins I've seen would be the BEM plugins:
https://github.com/postcss/postcss-bem-linter
https://github.com/davidtheclark/stylelint-selector-bem-pattern
These might work as a base guide on writing some plugins for your ECSS use case

Grunt relative file path globbing

Is it possible to use Globbing partially on a directory in a file path?
I have a grunt-contrib-less task set up, the file path for my task looks something like this:
files: {
"../../application/user/themes/some-theme-5.1.1.5830/css/main.css": "less/base.less",
}
However the version number in the relative path may sometime change, such as:
files: {
"../../application/user/themes/some-theme-5.1.1.5831/css/main.css": "less/base.less",
}
Ideally I'd like to something like this:
files: {
"../../application/user/themes/some-theme-*/css/main.css": "less/base.less",
}
Is there a way of doing this? With the above syntax it stops searching after the asterisk.
One potential solution to achieve this is to utilize grunts --options feature.
When running a grunt task via the command line it is possible to specify an additional options value.
In your scenario you could pass in the version number of the folder name that is going to change. (I.e. In your case the part that you tried to specify using the asterisk character (*) E.g. '5.1.1.5830'
Caveat: For this solution to be of any use it does require knowing what that value, (the version number), of the destination folder is upfront prior to running the task via the command line.
Example Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
themesFolder: {
namePart: '0.0.0.0' // <-- If no option is passed via the CLI this name will be used.
},
less: {
production: {
options: {
// ...
},
files: {
// The destination path below utilizes a grunt template for the part
// of the folder name that will change. E.g. '5.1.1.0'
'../../application/user/themes/some-theme-<%= themesFolder.name %>/css/main.css': 'less/base.less'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('saveFolderNameFromOption', 'Uses the option provided to configure name part.', function(n) {
var themesFolder = grunt.option('themesFolder');
if (themesFolder) {
// Store the option value so it can be referenced in the less task.
grunt.config('themesFolder.namePart', themesFolder);
}
});
grunt.registerTask('processLess', ['saveFolderNameFromOption', 'less:production']);
};
Running the ProcessLess task
Run the task via the command line as follows:
$ grunt processLess --themesFolder=5.1.1.5830
Note: The additional option that is specified. Namely: --themesFolder=5.1.1.5830
When using the above command the .css output will be directed to the following path:
'../../application/user/themes/some-theme-5.1.1.5830/css/main.css': 'less/base.less'
Now, each time you run the task you modify the options accordingly.
Benefits: By providing the version number as an option via the CLI will avoid having to reconfigure your Gruntfile.js each time it is run.

JavaFX packager - can the name of the package icon be specified?

For a couple of years, I have been releasing updates to a modest app on a yearly basis -- just before the summer swim league starts up.
In the past, I have specified the various icons (volume, app, etc.) by placing them in the package/macosx/ folder. The filenames, MyApp-volume.icns etc., matched the <fx:application name="MyApp" .../> and everything worked just fine.
But starting with this year's build and deployment, the app's name will contain the year -- i.e., MyApp 2016. However, I don't want to be changing the icon filenames each year; I would like to keep them as they are (MyApp-volume.icns, MyApp.icns).
Is there a way to tell the Java packager to use a specific icon filename, one that is different from that of the app name or title? (I have looked at Oracle docs, but I don't see anything.)
-Bicon=<path to icon relative to project resourses>
is this what you looking for?
or you could just add it to your main app Stage.
hope it is usefull
As I wrote in my first comment to my question, javapackager doesn't have an option to do this.
Here's the solution that I worked out:
Create a new folder at the same level as the folder package (this doesn't refer to Java package but to Custom Resources). Name the new folder package-base.
Move the macosx and windows folders from package to package-base. (I don't produce an executable for Linux because none of my users use Linux.) Now, the package folder is empty.
In my build script, I added a step which, for every build that produces a "self-contained application package" (Oracle's terminology), cleans the package folder, and then copies the contents of package-base to package.
The files are renamed as they are copied to include the desired wording -- in my case, that means the year is appended to the filename. For example, MyApp-volume.icns when copied is renamed MyApp-2018-volume.icns.
Here are the relevant Gradle snippets:
import org.gradle.internal.os.OperatingSystem
...
def getYear() {
new Date().format('yyyy')
}
...
ext {
...
year = getYear()
appNameBase = "MyApp"
appName = appNameBase + " " + year
...
}
...
task macCleanPackage {
doLast {
if (OperatingSystem.current().isMacOsX()) {
delete fileTree(dir: "./package/macosx", include: "*.*")
}
}
}
task macCopyAndRenamePackageResources {
dependsOn macCleanPackage
doLast {
if (OperatingSystem.current().isMacOsX()) {
def toDir = "./package/macosx"
copy {
from './package-base/macosx'
into "${toDir}"
include "*${appNameBase}*.*"
rename { String fileName -> fileName.replace("$appNameBase", "${appName}") }
}
ant.replaceregexp(file: "${toDir}/${appName}-dmg-setup.scpt", match:"${appNameBase}", replace:"${appName}", flags:'g')
}
}
}
task windowsCleanPackage {
doLast {
if (OperatingSystem.current().isWindows()) {
delete fileTree(dir: "package/windows", includes: ["*.bmp", "*.ico", "*.iss"])
}
}
}
task windowsCopyAndRenamePackageResources {
dependsOn windowsCleanPackage
doLast {
if (OperatingSystem.current().isWindows()) {
def toDir = "./package/windows"
copy {
from './package-base/windows'
into "${toDir}"
include "*${appNameBase}*.*"
rename { String fileName -> fileName.replace("$appNameBase", "${appName}") }
}
// Replace app name in iss setup script to include year.
def issFilename = "./package/windows/${appName}.iss"
ant.replaceregexp(file: "${issFilename}", match: "${appNameBase}", replace: "${appName}", flags: "g")
ant.replaceregexp(file: "${issFilename}", match: "AppCopyright=Copyright (C)", replace: "AppCopyright=Copyright (C) ${year}", byline: "on")
ant.replaceregexp(file: "${issFilename}", match: "AppVersion=", replace: "AppVersion=${year} build ${buildNumber}", byline: "on")
ant.replaceregexp(file: "${issFilename}", match: "OutputBaseFilename=.*", replace: "OutputBaseFilename=${appName}-(build ${buildNumber})", byline: "on")
}
}
}
I don't just change filenames.
For the OS X release, ant.replaceregexp is used to modify the app's name in the custom AppleScript file.
For the Windows release, ant.replaceregexp is used extensively to replace version numbers, copyright, as well as the application's name (including the year) in the InnoSetup configuration file.
It may seem like a lot of extra work, but once the script is written, it just works.

Grunt specify order of injected files in index.html

I am using a angular-fullstack yeoman generator for one of my projects and if I run grunt build my index.html is overwritten with the injected dependencies that grunt-injector finds. The problem is that I want to specify the loading of some of the modules in a certain order or I just want to ignore a specific folder. How can I do that? Currently some javaScript files are loaded in a wrong order and every time I run grunt build I get an error.
you can use arrays to specify the order, for instance
// Inject application script files into index.html
scriptsVendor: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/app/', '');
return '<script src="' + filePath + '"></script>';
},
starttag: '<!-- injector:js -->',
endtag: '<!-- endinjector -->'
},
files: {
'app/index.html': [
[
'app/lib/js/jquery.js',
'app/lib/js/bootstrap.js',
'app/lib/js/angular.js'
],
[
'app/lib/js/angular-*.js',
'app/lib/js/ui-*.js'
]
}
}
So I load before jquery then bootstrap, angular. In the next block all the angular modules starting with angular- and ui-.
To ignore certain files or folder
!app/lib/js/*.min.js
!app/lib/js/folder_to_ignore/*.js
Even if a bit late I hope it helps :-)
in my case I have several angular modules, with config and run functions, seperated over three files called xyz.module.js, xyz.config.js, xyz.run.js
Gulp searches for all .js files : "**/*.js" and alphabetical order is used when injecting, hence *.module.js is loaded after *.config.js, which delivers errors about lacking xyz module definition.
So the order should be switched. I don't want to use hardcoded arrays, I want to keep using wildcards.
Solution which does it in my case :
https://ww
usage (in gulpfile) :
var angularFilesort = require('gulp-angular-filesort');
gulp.src(['./src/app/**/*.js']).pipe(angularFilesort())
Just to tag on to #felix-at-housecat's answer, I needed to ensure that angular-translate-handler-log.js was rendered after angular-translate.js, but due to alphabetical sorting, it would show up before. To achieve this, I set up the injector as follows:
injector: {
dev: {
files: {
'dist/static/index.html': [
[
'dist/static/js/lib/jquery.js',
'dist/static/js/lib/bootstrap.js',
'dist/static/js/lib/angular.js',
'dist/static/js/lib/angular-*.js',
'dist/static/js/lib/angularjs*.js',
. . .
'!dist/static/js/lib/angular-translate-handler-log.js'
],
[
'dist/static/js/lib/angular-translate-handler-log.js'
]
]
},
. . .
Now, /angular-translate-handler-log.js will be rendered in the file after all of the files in the first array (which includes angular-translate.js).

Resources