I have the following task in gulp and I need to ADD at the beginning of my concatenated file (testApp.css) some text for copyright information.
How to achieve it in gulp?
gulp.task('flat', function () {
gulp.src(['themes/**/*.styl', '!themes/**/**mixins**.styl', '!themes/**/**variables**.styl'])
.pipe(stylus({
compress: true,
use: nib()
}))
.pipe(concat('testAll.css'))
.pipe(gulp.dest('testx'));
});
You can use prepend with gulp-insert
npm install gulp-insert
Used in combination with fs:
var fs = require('fs');
var insert = require('gulp-insert');
var copyright = function () {
return fs.readFileSync('copyright.txt');
};
gulp.task('flat', function () {
gulp.src(['themes/**/*.styl', '!themes/**/**mixins**.styl', '!themes/**/**variables**.styl'])
// Your other stuff
.pipe(insert.prepend(copyright));
.pipe(gulp.dest('testx'));
});
Check it out on GitHub for more information.
I was able to solve my issue using gulp-header. Suggestion for other suitable plugins are welcome.
var stylus = require('gulp-stylus');
var nib = require('nib');
var concat = require('gulp-concat');
var header = require('gulp-header');
var fs = require('fs');
gulp.task('flat', function () {
gulp.src(['themes/**/*.styl', '!themes/**/**mixins**.styl', '!themes/**/**variables**.styl'])
.pipe(stylus({
compress: true,
use: nib()
}))
.pipe(concat('testAll.css'))
.pipe(header(fs.readFileSync('copyright.txt', 'utf8')))
.pipe(gulp.dest('test'));
});
Related
Where is problem? https://i.ibb.co/L0PsxWV/Screenshot-5.png
I have install gulp 3.9.1, and NODE.js 10.13.3...
"use strict";
var iconfont = require('gulp-iconfont');
var runTimestamp = Math.round(Date.now()/1000);
gulp.task('Iconfont', function(){
return gulp.src(['src/icons/*.svg'])
.pipe(iconfont({
fontName: 'myfont', // required
prependUnicode: true, // recommended option
formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
timestamp: runTimestamp, // recommended to get consistent builds when watching files
}))
.on('glyphs', function(glyphs, options) {
// CSS templating, e.g.
console.log(glyphs, options);
})
.pipe(gulp.dest('src/fonts/'));
});
add this top of gulpfile.js :
var gulp = require('gulp')
I'm trying to render each file in my gulp source files with it's own json file, but I can't figure out how to access the current filename in the pipe function.
var gulp = require('gulp');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars');
gulp.task('compile-with-sample-data', function () {
var options = {}
return gulp.src('./src/**/*.html')
.pipe(gulpHandlebars({ data: require('./data/' + filename +'.json') }, options))
.pipe(gulp.dest('./build/'));
});
Where I can get it to work with the same file each time by just using require('./data/orders-complete.json'):
var gulp = require('gulp');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars');
gulp.task('compile-with-sample-data', function () {
var options = {}
return gulp.src('./src/**/*.html')
.pipe(gulpHandlebars({ data: require('./data/orders-complete.json') }, options))
.pipe(gulp.dest('./build/'));
});
It's not clear how I would do this.
Use gulp-tap, it enables you to get the file name and even change it for downstream pipes.
I'm using Gulp in a VS2015 project to run jscs on JavaScript files with the fix option set. The intention is to modify the same file that is read (viz., source and destination are the same).
var gulp = require('gulp');
var jscs = require('gulp-jscs');
var chmod = require('gulp-chmod');
var exec = require('gulp-exec');
var ourJsFiles = // an array of files and globbed paths
gulp.task('jscs', function (callback) {
ourJsFiles.forEach(function (fn) {
gulp.src(fn, { base: './' })
.pipe(jscs({
"preset": "google",
"maximumLineLength": 160,
"validateIndentation": 3,
"fix": true
}))
.pipe(gulp.dest('./'));
});
callback();
});
But I do not want to process any files that are read-only. Is there already a way to detect this in Gulp on Windows?
There is a plugin which allows you to work with subset of files: gulp-filter.
One of options is to pass filter function which will receive vinyl file object, so for e.g. you could use stat.mode property of that object which holds permissions and do something like:
var filter = require('gulp-filter');
...
var writableFiles = filter(function (file) {
//https://github.com/nodejs/node-v0.x-archive/issues/3045
var numericPermission = '0'+(e.stat.mode & parseInt('777', 8)).toString(8);
return numericPermission[1]==='6'
});
...
gulp.src(....)
.pipe(writableFiles)
For clarification - this is a question about writing a webpack plugin
How do you use the webpack require inside a webpack plugin?
MyPlugin.prototype.apply = function(compiler) {
var self = this;
compiler.plugin('emit', function(compilation, callback) {
var file = 'example.css';
compilation.fileDependencies.push(file);
var loaderResult = require('style!css!' + file); // <-- is there any way to make this possible?
});
};
After some searching I saw that the text-extract plugin uses a child compilation to use a compiler inside the plugin:
https://github.com/SanderSpies/extract-text-webpack-plugin/blob/be6484f00c46799280b9ec28946faf935cb9ae63/loader.js#L65
In the following example I am using the my-loader to load and compile the input.js file:
MyPlugin.prototype.apply = function(compiler) {
compiler.plugin('make', function(compilation, callback) {
var outputOptions = {
filename: 'output.js',
publicPath: compilation.outputOptions.publicPath
};
var childCompiler = compilation.createChildCompiler('MyPluginCompilation', outputOptions);
childCompiler.apply(new NodeTemplatePlugin(outputOptions));
childCompiler.apply(new LibraryTemplatePlugin('result', 'var'));
childCompiler.apply(new NodeTargetPlugin());
childCompiler.apply(new SingleEntryPlugin(this.context, 'my-loader!input.js'));
childCompiler.runAsChild(callback);
});
};
Consider the following two files:
config.json
{
"vendorFiles": [
"vendor/angular/angular.js",
"vendor/angular-ui-router/release/angular-ui-router.js",
"vendor/angular-ui-utils/modules/utils.js"
]
}
gulpfile.js
var gulp = require("gulp"),
concat = require("gulp-concat"),
config = require("./config");
gulp.task("build-vendor", function() {
gulp.src(config.vendorFiles)
.pipe(concat("vendor.js"))
.pipe(gulp.dest("build"));
});
How can I eliminate the need to specify vendor/ for each file in config.json? That file is one that is manually edited by other developers by hand, so I want to make it as hassle-free on them as possible.
Ideally I'd like my gulpfile.js to take care of adding that prefix (somehow), and for my config.json to look like this:
{
"vendorFiles": [
"angular/angular.js",
"angular-ui-router/release/angular-ui-router.js",
"angular-ui-utils/modules/utils.js"
]
}
There may be a better way with a Gulp specific solution, but this should work.
var gulp = require("gulp"),
concat = require("gulp-concat"),
config = require("./config");
gulp.task("build-vendor", function() {
gulp.src(config.vendorFiles.map(function(a) {return 'vendor/' + a}))
.pipe(concat("vendor.js"))
.pipe(gulp.dest("build"));
});
Demo:
http://jsfiddle.net/AK4tP/
Can't you just do
var gulp = require("gulp"),
concat = require("gulp-concat"),
config = require("./config");
gulp.task("build-vendor", function() {
gulp.src(config.vendorFiles, {root: 'vendor/'})
.pipe(concat("vendor.js"))
.pipe(gulp.dest("build"));
});
Gulp should accept root option in src() although it's not documented.