Alright, one for the ages. The issue is I am trying to merge the structure from multiple sources into a single one. One of my sources is from the template.html which contains the base structure for index.html -source-. I trying to find a solution that replaces html block data from the source -index.html- body tag into the destination -template.html- lastly create a new merged document which outputs to -dest-.
File structure that is as follows:
public
---assets
------template.html
---src
------app.js
------index.html
------main.css
---dist
------merged.html
I am using npm package gulp-replace (but open to other packages).
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
var copycat = require('gulp-copycat');
gulp.task('default', function() {
// create a watch task
gulp.task('default', function() {
gulp.src('assets/template.html')
.pipe(htmlreplace({
'cssInline': {
src: gulp.src('sheetgmail/main.css'),
tpl: '<style>%s</style>'
},
'body': gulp.src('sheetgmail/index.html'),
'headscript': {
src: null,
tpl: '%s'
},
'js': {
src: gulp.src('sheetgmail/app.js'),
tpl: "<script type='text/javascript'>%s</script>"
},
}, {
keepUnassigned: false,
keepBlockTags: true,
resolvePaths: false
}))
.pipe(gulp.dest('dist/'));
});
});
Related
The following code does not work. I am trying to connect the 'html-minifier' plugin to 'gulp' via the 'vinyl-source-stream' plugin.
Why am I doing this? I read on this page that you can connect the plugin 'browserify'. I wrote this code but it gives an error. How can I resolve it?
'use strict';
const { src, dest, series } = require('gulp')
const htmlMinify = require('html-minifier').minify;
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true
};
const result = htmlMinify('frontend/*.html', options)
function test() {
return result.bundle()
.pipe(source('frontend/**/*.html'))
.pipe(buffer())
.pipe(dest('public'))
}
exports.build = series(test)
I wrote the following code and now the 'html-minifier' plugin can work directly in 'gulp'.
The const options variable is the 'html-minifier' plugin settings.
Then we create a function gHtmlMinify that can be run with the gulp gHtmlMinify command.
return src(...) is your html files path.
.on('data', function(file) {...} Each thread has a "data" event..
We hang the processing of the "data" event..
When the "data" event is called, the "file" object comes to us, which contains information: file name, file path, working directory and file contents.
The content of the file is represented as a read buffer file.isBuffer().
Buffer.from The raw data is stored in instances of the Buffer class.
(file.contents.toString() This file content is BUFFER.
The toString() method returns a function that represents an object. Converts to a string.
console.log ({ // Outputting the structure of what the file consists of.
contents: file.contents, // Content of the file BUFFER. The buffer is not a string!
path: file.path, // Path to the file.
cwd: file.cwd, // Current directory. "The directory where the gulp command was run".
base: file.base, // Value before asterisks i.e. app/
relative: file.relative, // Value after the asterisks i.e. filename.html
dirname: file.dirname, // File directory.
basename: file.basename, // File name.
stem: file.stem, // File name without extension.
extname: file.extname // File extension.
})
const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true,
collapseWhitespace: true
};
function gHtmlMinify() {
return src('app/**/*.html')
.on('data', function(file) {
const buferFile = Buffer.from(htmlMinify.minify(file.contents.toString(), options))
file.contents = buferFile;
console.log(file);
return;
})
.pipe(dest('build'))
}
exports.gHtmlMinify = series(gHtmlMinify)
I'm trying to copy an index.html file to multiple folders. I've been looking on stack overflow and almost found the solution i'm looking for. The loop in my example only copy's the index.html file to the last folder of the folders array. I wonder what i'm overlooking. any ideas?
module.exports = function(grunt){
grunt.initConfig({
copy:{
files:{
flatten:true,
expand: false,
src: [
'scaffold/index.html',
],
dest: "dist/<%= grunt.option('folder') %>/",
filter: 'isFile',
force: true
}
}
})
function copytoFolders() {
var folders = ["300x600", "300x250", "336x280"], folder;
for (folder in folders)
{
grunt.option('folder', folders[folder]);
grunt.task.run('copy');
}
}
grunt.loadNpmTasks('grunt-contrib-copy-force');
grunt.registerTask('copyFol', copytoFolders)
}
Ok i solved it by looking at this post:
stack overflow post
So basically it now returns a file object array and when the default task is called, it executes the object files.
Here is the script that works for me:
module.exports = function(grunt) {
function getFiles() {
var folders = ["300x600", "300x250", "336x280"];
var files = [];
for (var folder in folders) {
files.push({
flatten:true,
expand: true,
src: [
'scaffold/index.html',
],
dest: "dist/" + folders[folder] + "/",
filter: 'isFile'
});
}
return files;
}
grunt.initConfig({
copy: {
core: {
files: getFiles()
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['copy:core']);
};
Hi i have a little bit of a problem in my Gulp configuration for images, my gulp task is supposed to minify all images in the resources folder and then place the minified version in the public directory, however only the PNG images are being exported correctly...
gulp.task('images', function() {
gulp.src(assets + 'images/**')
.pipe(imagemin({
progressive: true,
optimizationLevel: 7,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(public + 'images/'));
});
That is the task that i'm running, i am currently using imagemin version ^2.4.0
Got the same issue, here is my config:
let developmentAssets = "src",
productionAssets = "dist";
module.exports = {
optimize : {
images: {
src: developmentAssets + '/img/**/*.{jpg,jpeg,png,gif,svg}',
options: {
optimizationLevel: 3,
progessive: true,
interlaced: true
}
}
}
};
and then in your task
/*
This is my particular setting to have everything organized
read this amazing gulp tutorial: http://stefanimhoff.de/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html/
*/
config = require('./gulp/config'),
configImg = config.optimize.images,
.pipe(imagemin(configImg.options))
Hope that it helps.
I'm trying to create new grunt task for generating sprites for magento2. I'm using grunt-spritesmith plugin for that. In Gulpfile.js I have mapped sprite task to grunt-spritesmith in JitGrunt config:
require('load-grunt-config')(grunt, {
configPath: path.join(__dirname, configDir),
init: true,
jitGrunt: {
staticMappings: {
usebanner: 'grunt-banner',
sprite: 'grunt-spritesmith'
}
}
});
in dev/tools/grunt/configs I made a config file sprite.js with contents:
'use strict';
module.exports = {
sprite: {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
}
};
But grunt sprite gives me
>> No "sprite" targets found.
Or if in different configurations I'm able to register sprite task, I'm not able to pass config with src, dest and destCss params.
You have not include task name. This works:
'use strict';
module.exports = {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
};
I am using requirejs and gulp to build angular app. I am using amd-optimize and gulp-requirejs-optimize to add all js files into single file. Here is my main.js file:
require.config(
{
paths: {
app : 'app',
angular : '../bower_components/angular/angular',
jquery : '../bower_components/jquery/dist/jquery',
angularResource : '../bower_components/angular-resource/angular-resource',
angularRoute : '../bower_components/angular-route/angular-route',
publicModule : 'public_module',
route : 'route'
},
shim: {
'app': {
deps: ['angular']
},
'angularRoute': ['angular'],
angular : {exports : 'angular'}
}
}
);
And gulpfile.js
var gulp = require('gulp');
var rjs = require('gulp-requirejs');
var connect = require('gulp-connect');
var requirejsOptimize = require('gulp-requirejs-optimize');
var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');
// using amd-optimize.
gulp.task('bundle', function () {
return gulp.src('app/**/*.js')
.pipe(amdOptimize('main'))
.pipe(concat('main-bundle.js'))
.pipe(gulp.dest('dist'));
});
// using gulp-requirejs-optimize.
gulp.task('scripts', function () {
return gulp.src('app/main.js')
.pipe(requirejsOptimize())
.pipe(gulp.dest('dist'));
});
When I run gulp bundle or gulp scripts, it shows me same content of main.js file in output file(not showing all js template in one output file).
The output file is:
require.config({
paths: {
angular: '../bower_components/angular/angular',
jquery: '../bower_components/jquery/dist/jquery',
angularResource: '../bower_components/angular-resource/angular-resource',
angularRoute: '../bower_components/angular-route/angular-route',
publicModule: 'public_module',
route: 'route'
},
shim: {
'app': { deps: ['angular'] },
'angularRoute': ['angular'],
angular: { exports: 'angular' }
}
});
define('main', [], function () {
return;
});
How can I configure gulp to put every js template into one js file?
check the docs for all the options for amdoptimize. For example you can point to your config file or add paths.
I always have trouble getting all the paths to line up, so make sure to check them diligently.
here is how you can start to put the options in:
gulp.task('requirejsBuild', function() {
gulp.src('app/**/*.js',{ base: 'app' })
.pipe(amdOptimize("app",{
baseUrl: config.app,
configFile: 'app/app-config.js',
findNestedDependencies: true,
}))
.pipe(concat('app.js'))
.pipe(gulp.dest('dist'))
});
You are not requiring any files - you just define an empty module named main.
You need to kick off you app by requiring a module, eg.
require(['app'], function (App) {
new App().init();
});