I'm trying to use gulp useref to merge my bower js files, app js files and css but its not working for me. My dest directory is always empty when i run gulp command
Here is my directory structure which is generated using yomean
app
bower_components
main
img
dest
gulp
hooks
node_modules
This is my index.html
<!-- build:js scripts/app.js -->
<!-- inject:js -->
<script src="app.js"></script>
<script src="main/main.js"></script>
<script src="main/constants/config-const.js"></script>
<script src="main/controllers/badge.controller.js"></script>
<script src="main/controllers/creation.controller.js"></script>
<!-- endinject -->
<!-- endbuild -->
My gulp.js looks like this
gulp.task('useref', function(){
return gulp.src('app/main/*.html')
.pipe(useref())
.pipe(gulp.dest('dest'),{relative: true});
});
useref task runs fine as i see it in my terminal console but for some reason dest directory does not have resultant file in it
For me this was all rev issues. Remove all local versions and -g versions of gulp-useref and make sure your local package.json devDependencies sections is list gulp-useref^3.0.0
"devDependencies": {
"gulp-useref": "^3.0.0",
. . . .
}
then from project home
npm up --dev
I also updated gulp-cli and gulp to 4.0 while I was at it. I am a newbee so how will I every know if this is a mistake or not.
takes a while but it ended a day of fruitless head pounding with a satisfying result and bowl of Ben&Jerry's ice cream
Related
I'm brand new to Gulp and I was able to create a site.min.js file, which as I understand is the minified versions of my JavaScript files.
How do I take advantage of that?
I'm not sure if I'm on the right track, but should my index.html also be getting modified to only load the new min.js file?
When you minify a file, the result is a completely different file. You need to link it in your page in order to use it.
<script src="site.min.js"></script>
The production version of your index.html file should only link to the minified version and any non-minified version should be removed.
There are gulp plugins which help with this.
gulp-useref is popular
gulp-html-replace is quite flexible
gulp-usemin
gulp-htmlbuild
They all offer a similar feature where you can specify blocks within HTML comments that will be replaced by the minified version.
<!-- build:js -->
<script src="website-module.js"></script>
<script src="core.js"></script>
<!-- endbuild -->
With the right options within your gulp task, it would become:
<script src="site.min.js"></script>
What is a good strategy for concatenating and minifying modules?
I want to take this:
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/satellizer/satellizer.min.js"></script>
etc...
And make it this:
<script src="js/all_bower_components.js"></script>
I am running this build process for my other js files, which are concatenated and minified into main.js, but that's easy because my folder structure for my own JS files is relatively predictable. But my bower components is not:
bower_components/
angular/
angular.js
index.js
other random js files which aren't the ones I need
jquery/
dist/
jquery.js
src/
bunch of other crap
I am attempting it as such: Loop through all components and sub folders and simply search for .js files... but again, this could be including things I do not need like index.js in Angular:
gulp.task('modules', function() {
return gulp.src(['bower_components/**/*.js'])
.pipe(concat('modules.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
Any thoughts?
have you tried main-bower-files? this gulp plugin will capture all your base bower .js and .css by looking in your components' bower.json file for which files to grab (those listed as main). you can override the defaults within your call to the plugin for any requirements that don't match their bower.json config. i've found this very useful for bundling a vendor.js and vendor.css for a dependency-heavy app.
good luck!
I am new to reactjs and trying to install babel to run babel code without serving HTTP file. By following the Package Manager I have installed it with browserify as:
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify ] main.js -o bundle.js
After it I created the file .babelrc in the same root directory with following code
{ "presets": ["react"] }
And removed the HTTP babel-core source file as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- removed https://npmcdn.com/babel-core#5.8.38/browser.min.js -->
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
</script>
</body>
</html>
but when I access it from http://localhost/react/ this doesn't work.
You haven't included the code that's failing or the error message, so this is a guess.
The problem is that when you run browserify, it transpiles (converts) the code you specify from ES2015 to plain old Javascript. So, when you do this:
browserify -t [ babelify ] main.js -o bundle.js
You're converting the code in main.js and writing it to bundle.js.
So there are two problems with your code:
you never include bundle.js in your HTML file. You need to add <script src="build/bundle.js"></script> to load the code that you transpiled.
the code in your HTML <script> block is not touched by browserify. Your build step (running browserify) is working on scripts, not on HTML files. So that code never gets transpiled and fails when the browser tries to execute it.
The reason it works when you include babel-core in the HTML is because Babel has a special "live" transpilation mode which will transpile your code when the page is loaded, and this mode DOES get the code in the <script> block because it's all running on the user's browser.
I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?
What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.
As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).