I'm new to webpack and trying to figure out how to use my own html file in the webpack-dev-server, as well as my webpack build.
in my app.js I have:
require('!jade!index.jade')
but that does not make an index.html as I would expect. Instead, it seems at best I can get a string output of my html, which isn't what I want:
var jade = require('!jade!index.jade')
jade() //outputs my html
How do I get it to output an index.html file? How do I get the webpack-dev-server to use that html file?
I should also mention my jade file will likely reference stylus files
I use jade-html-loader with the following entry in webpack.config.js:
entry: ['./src/app.js', 'file?name=index.html!jade-html!./src/index.jade']
You will need
npm install --save-dev file-loader jade-html-loader jade
Related
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
I am trying to compile ES6 to a file using Webpack and can't figure out why the code is not usable as it is.
Side note : This is meant to be a plugin for VueJS
I start with a simple file that exports a single function such as
exports.install = () => {
...
}
Webpack uses babel-loader and babel-preset-es2015 to compile it.
You may find webpack config, source and compiled files in this gist.
My problem is the result is not "requirable" in my Vue app... It has some weird stuff around the core needed exports.install statement. When I remove all this stuff and leave just exports.install = ... it is OK, otherwise I just don't get anything out of it.
I am using it in another app built with webpack, through an import statement.
Without an output.libraryTarget option, webpack will generate a bundle you can include via a <script> tag, but not import. I think this is what you're seeing.
If you want to import (or require) the result of your webpack build, you should set libraryTarget to commonjs2
output: {
filename: 'index.js',
libraryTarget: "commonjs2"
},
With this libraryTarget configuration, the webpack output will look like module.exports = /* ... the "weird stuff" */, so when you import it, you'll get the exported function you expect.
If all you're doing is compiling a single file or set of files that will be imported in another webpack build, you might consider not using webpack at all, and instead using the Babel CLI directly. In your Gist, you're not getting anything from webpack other than wrapping your module in some extra webpack bootstrap code.
I am using bower and wiredep. I want to have a gulp task to combine and uglify all files into a single file... "allmyjs.min.js"
My problem is with libraries like "angular" where within the bower_components/angular directory, there are multiple js files:
angular.js
angular.min.js
index.js
All I want to pick up is the non-minified file so I can concat all my js and minify them, but how do I specify a rule in my list of files that can ignore the .min files?
Right now I have rules like:
"myjs/js/*.js"
"bower_components/angular/angular.js" <- this works, but I have to list out every single dependency which is a nightmare
//"bower_components/angular/*.js" <- this does not work because it picks up everything
I know when I do a wiredep, it looks like bower is smart enough to pick out the specific "JS" files that it injects into my HTML. Is there a way that I can do something in my gulpfile that is smart enough to read the dependencies in bower and include the correct/associated js files without me having to list out every single dependency: (e.g. "bower_comonents/angular/angular.js") for every single bower dependency?
In gulp.src a glob that begins with '!' excludes matching files from the glob results up to that point
var jsFiles = './js/**/*.js';
var minJsFiles = './js/**/*.min.js';
gulp.task('minify', function(){
return gulp.src([jsFiles, '!' + minJsFiles])
.pipe(doSomething()); // min files or some other stuff here
});
I don't understand how I can set the precision required for bootstrap sass through jekyll.
Besides, I can't understand how jekyll automatically loads the files .scss who I placed in everywhere if I only set the _sass dir.
For example in my directory CSS I have a file named style.scss and it automatically generates the right css files in .site/css.
Below the piece of code about SASS settings:
sass:
sass_dir: _sass
style: :nested
Thanks for your help,
Regards,
Silvio S.
Sass precision
Sass precision cannot be set in Jekyll configuration. It can only be set in command line or in a ruby script (plugin)
What is the jekyll sass entry point ?
Jekyll will process any file with a front matter with the appropriate converter. For sass and scss files it will use jekyll-sass-converter.
css/main.scss is processed, it is your entry point.
During this processing, the converter looks for #imported files in the sass_dir path, which by default is _sass. It can be any path in your root folder.
Sass and scss files, once processed, are outputed with a css extension.
Say I have these folders:
./
|
folder1/
|---file1.js
|---file2.js
folder2/
|---file1.js
|---file2.js
I want to run a task with gulp.src('./*/.js'), and I want them to be output as the following:
./
|
folder1/
|---file1.js
|---file2.js
|---file1.min.js
|---file2.min.js
folder2/
|---file1.js
|---file2.js
|---file1.min.js
|---file2.min.js
This really is something that you can solve by reading any one of a number of gulp articles already out there. Google for gulp tutorial and start reading articles.
By default, the relative source path for an input file is preserved through to the output file in gulp. You don't have to do anything special. If you want something similar to what you've got, you need to use a JS minifier, such as the gulp-uglify plugin, and the gulp-rename plugin.
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('src/**/*.js')
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(gulp.dest('dest/'));
});
The relative path is based on the first glob in the string, in the example above, it's the **, so the relative path would be any folders after src/. This means a file at src/foo/bar.js would be saved as dest/foo/bar.min.js, because the relative path is foo/.