I have the following text in a index.html file I want to replace with gulp-replace-task:
<img src="assets/images/logo
<img style="width:100px;height:100px;" src="assets/ima
I want to make it such that all instances of "assets" are replaced with "my/stuff".
I tried the following, but it is not working:
gulp.task('default', function() {
gulp.src('./index.html')
.pipe(replace({
patterns: [
{
match: '/assets/g',
replacement: 'my/stuff'
}
]
}))
.pipe(gulp.dest('./'))
Match can be a string but if you want to use regexp remove the quotes ' around the regexp.
gulp.task('default', function() {
gulp.src('./index.html')
.pipe(replace({
patterns: [
{
match: /assets/g,
replacement: 'my/stuff'
}
]
}))
.pipe(gulp.dest('./'))
You may also use module gulp-string-replace which supports manages with regex, string or even functions.
Example:
Regex:
var replace = require('gulp-string-replace');
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace(new RegExp('#env#', 'g'), 'production'))
.pipe(gulp.dest('./build/config.js'))
});
String:
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace('environment', 'production'))
.pipe(gulp.dest('./build/config.js'))
});
Function:
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace('environment', function () {
return 'production';
}))
.pipe(gulp.dest('./build/config.js'))
});
Related
I'm using Gulp to automatically copy/bundle/compile my files, I basically copy the entire folder structure from the base folder (MyProject/Scripts) to wwwroot/js.
In the process of copying/processing I want to rename the output path/filenames to lowercase. I found the ChangeCase-module and the Rename-module but I can't get it to work in my setup below.
gulp.task("compile:less", function () {
return gulp.src(paths.lessSrc)
.pipe(less())
//how can I get to currentdirectory so I can use it for the rename? maybe there is another way
//.pipe(rename({ dirname: changeCase.lowerCase(??currentdir??) }))
.pipe(gulp.dest(paths.cssTarget));
});
and
gulp.task("compile:js", function () {
return gulp.src(paths.jsOrigin)
//simple copy of folders and files but how to rename all to lowercase?
.pipe(gulp.dest(paths.jsTarget));
});
You can pass a callback function to gulp-rename:
gulp.task("compile:js", function () {
return gulp.src(paths.jsOrigin)
.pipe(rename(function(path) {
path.dirname = changeCase.lowerCase(path.dirname);
path.basename = changeCase.lowerCase(path.basename);
path.extname = changeCase.lowerCase(path.extname);
}))
.pipe(gulp.dest(paths.jsTarget));
});
I have all of my paths defined at the top of the project,
var paths = {
scripts: ['./js/main.js', './js/datetimepicker.js'],
styles: ['./stylesheets/style.scss', './stylesheets/datetimepicker/datetimepicker.css', './stylesheets/vis/vis.css'],
images: ['img/**/*'],
libs: ['./js/*.min.js', './img/*', './fonts/FontAwesome/*'],
compress: ['./css/**', './fonts/FontAwesome/**', './img/**', './js/main.min.js', './js/bootstrap.min.js'],
concat: [{
'src': './web-src/js/services*.js',
'name': 'services.js'
}]
};
My issue is that when I call paths.concat[0].src I am forced to specify what index in the array I want. So when I call my concat task,
gulp.task('concat', function () {
return gulp.src(paths.concat[0].src)
.pipe(concat(paths.concat[0].src))
.pipe(gulp.dest('./dist/'));
});
Having the paths defined is not helpful. What is the 'best practice' way of looping over a task?
Thanks
I accomplished this using,
gulp.task('concat', function () {
return paths.concat.forEach(function(obj) {
return gulp.src(obj.src)
.pipe(concat(obj.name))
.pipe(rename(function (path) {
path.basename += '.min';
return path;
}))
.pipe(gulp.dest('./web/js'));
});
});
From what I can tell, an interpolated value string expands/resolves correctly if it's specified in the template, but not if it's added later. To demonstrate, I have the following code:
describe.only('directive tests - ', function() {
it('add dynamic interpolated attribute value', function() {
module(function($compileProvider) {
$compileProvider.directive('hello', function() {
return {
restrict: 'A',
replace: true,
template: '<a foo="{{1+1}}"></a>',
compile: function link(tElement, tAttrs) {
tElement.attr('bar', '{{2+2}}'); // add an interpolated attr.
}
};
});
});
inject(function($compile, $rootScope) {
var element = angular.element('<div hello/>');
$compile(element)($rootScope);
$rootScope.$apply();
console.log(' * ', element.prop('outerHTML'));
});
});
});
and console.log prints:
<a foo="2" hello="" bar="{{2+2}}" class="ng-scope"></a>'
and NOT:
<a foo="2" hello="" bar="4" class="ng-scope"></a>'
as I'd think. What gives?
tElement.attr('bar', $interpolate('{{2+2}}')());
Right, it is too late to do this in compile, more specifically to make changes to the directive element itself that have to be compiled (it needs to be recompiled in order to make the changes work).
But the following
// replace: true,
template: '<a foo="{{1+1}}">aa</a>',
compile: function link(tElement, tAttrs) {
tElement.find('a').attr('bar', '{{2+2}}');
}
would work as expected.
Attribute watching and interpolation can also be done in link (or controller):
link: function (scope, element, attrs) {
attrs.$observe('bar', function (interpolatedBar) {
scope.bar = interpolatedBar;
});
}
It will set up a watcher on bar attribute (while $interpolate(...)() is one-time assignment and doesn't interpolate any values from scope).
I'm manipulating a set of files and I am using gulp-replacer-task to replace the content of processed files with "strings" based on the basename or path of the file currently in the pipe-line.
How do i get at the file's properties currently in the pipe-line ?
gulp.task('svgbuild', function() {
return gulp.src('./src/*.svg')
.pipe(replace({
patterns: [
{
match: /STRING_TO_MATCH/g,
replacement: function() {
// how to get the basename of the "file" in the stream;
var str = 'file.basename'
// manipulate to get replacement string based on basename
var repl = str.toUpperCase()+'-inc'
return repl;
}
}
]
}))
});
Somewhat later than I hoped, but it appears I found a solution for the problem using gulp-tap. This is what my gulpfile.js looks like:
var gulp = require('gulp'),
path = require('path'),
replace = require('gulp-replace-task'),
tap = require('gulp-tap');
gulp.task('svgbuild', function () {
return gulp.src('*.txt')
.pipe(tap(function (file) {
return gulp.src(file.path)
.pipe(replace({
patterns: [
{
match: /foo/g,
replacement: function () {
var ext = path.extname(file.path),
base = path.basename(file.path, ext);
return base.toUpperCase() + '-inc'
}
}
]
}))
.pipe(gulp.dest('build'));
}));
});
I think you must look for the solution in Node.js. Maybe this helps: https://nodejs.org/api/path.html?
I have a partial of my gulpfile.js as shown below
var paths = {
src: {
css: [
'app/assets/css/bootstrap.min.css',
'app/assets/highlight/styles/monokai_sublime.css'
'app/assets/css/font.css',
'app/assets/css/style.css',
],
js: [
'app/assets/js/jquery.min.js',
'app/assets/js/bootstrap.min.js',
'app/assets/highlight/highlight.pack.js',
'app/assets/js/script.js',
],
},
dest: {
css: 'public/css/',
js: 'public/js/',
}
}
gulp.task('css', function() {
gulp.src(paths.src.css)
// .pipe(autoprefixer())
// .pipe(cssmin())
.pipe(concat('style.css'))
.pipe(gulp.dest(paths.dest.css));
});
gulp.task('js', function() {
gulp.src(paths.src.js)
// .pipe(uglify())
.pipe(concat('script.js'))
.pipe(gulp.dest(paths.dest.js));
});
For the css task I would like to perform autoprefixer() and cssmin() only for some source files then perform concat() for all of them into one single style.css and would like similarity to the js task, that only some source files need to be uglify() then concat() all of them into one single script.js