I would like use gulp-useref for concant js files in same order as in index.html.
Solution has this structure:
Solution Folder
App Folder
Services Folder
service.js
Scripts Folder
angular.js
index.html
<script src = "scripts/angular.js"></script>
<script src = "app/services/service.js"></script>
Gulp
gulp.src("index.html")
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(concant("app.js"))
.pipe(gulp.dest(config.dist + "/app"));
When I run this gulp task app.js file is created but contains content of index.html.
What I do wrong?
Related
So I'm trying to set up the basic gulp workflow with sass and I am missing something, but I can't find it. I've searched the web for a workflow example with dist/src folders, NOBODY takes you step by step on how and why things are done.
Anyway, I have a basic folder project with dist, src, node_modules, gulpfile.js and package.json.
My main problem is that the outputted src/sass/main.scss is not outputted into dist/css/main.css. This works only if I create a src/css/main.css file and the outputted .css file is generated there, although I clearly have .pipe(gulp.dest("dist/css")) in my gulpfile.js.
Here's my gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./src"
});
gulp.watch("src/scss/*.scss", ['sass']);
gulp.watch("src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
And in my html file I'm linking the .css with this:
<link rel="stylesheet" type="text/css" href="css/main.css"/>
I haven't even tried to add more plugins into gulp because for the life of me I can't figure out why this doesn't work.
Directory tree to make things easier to understand:
|-dist
|-css
|-main.css
|-img
index.html
|-node_modules
|-src
|-css
|-main.css
|-img
|-sass
|-_custom.scss
|-main.scss
index.html
gulpfile.js
package.json
Can someone please explain why I need to run the server in src and not dist?
Does gulp generate the sass and then knows how to copy it to dist?
What is actually wrong in my gulpfile?
in src there is no scss folder that you are targeting with
return gulp.src("src/scss/*.scss")
try to fix that first
I was starting an angular 2 project with webpack.I am using angular2-webpack-starter https://github.com/AngularClass/angular2-webpack-starter.
I want to include external javascripts and css in my app.I have checked some blogs but I found them confusing.
I'm guessing by external css and js you mean downloaded files that you have in your project somewhere. If you've used the webpack starter seed as is you most likely have an assets folder inside src/ thats already set up for you to place external css and js files in and list them in the index.html file.
If not, either redownload the seed if you want to start again, or you can create this folder under src, and include the files in the index.html file, something like
<script src="/assets/css/lib.min.css" />
<script src="/assets/js/lib.min.js" />
If you are bundling using webpack then you will also need to tell webpack to move the assets folder to the create location. In webpack.config.js you can do the following:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
new CopyWebpackPlugin([
{ from: 'src/assets', to 'assets' }
]),
...
}
Browsersync is just reloading index.html, even though I have my basedir set, and even the specific files listed on the files option.
I have looked on their docu but I have everything as they say, still it only refreshed or syncs index.hrml but about.html for example not.
My structure is this:
-booming-gaes-web
-dist
-node_modules
-src
-index.html
-about.html
-gulpfile.js
So my html files are direclty on my src folder, and the gulp file is in the same folder as the src folder.
My gulp file:
// Include gulp
var gulp = require('gulp');
// Include Plugins
var browserSync = require('browser-sync');
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['js-watch']);
gulp.watch('src/css/*.scss', ['sass-watch']);
gulp.watch('src/css/*.css', ['prefix']);
gulp.watch('src/*.html').on('change', browserSync.reload);
browserSync({
files: ['src/index.html','about.html'],
server:{
baseDir:'src',
directory: true
}
});
});
Any ideas what im I doing wrong ? thanks!
I just found out...
My about page didnt had a body tag, browsersync needs it to have a body tag in order to work.
From their help:
99% of the time, it's because your web page doesn't have a body tag.
In order for Browsersync to connect properly the body tag must be
present in your website (we add a script tag just after it).
Let's say that, I have a main module:
angular.module('myApp', ['myApp.view1']);
And the other module
angular.module('myApp.view1', ['ngRoute'])
the second one is in another directory in the project.The first module cannot find it's dependency, only if I also add
<script src="view1/view1.js"></script> in the index.html
,but it quickly becomes pretty hard to manage by hand, if one has lots of javascript files.
What is the best way to manage dependencies between angular modules, so that they can recognize each other?
You can use a task runner like grunt or gulp and concatenate all the javascript files during the build step and include that one file in your index.html file. I use gulp and here is a sample gulp task that helps you concatenate all the JS files using the gulp-concat plugin.
gulpfile.js
var gulp = require("gulp");
var concat = require("gulp-concat");
//if all your source js files are inside the src directory
var srcJs = ["src/**/*.js"];
gulp.task("js", function() {
return gulp.src(srcJs)
.pipe(concat("app.js") // concat into 1 file called app.js
.pipe(gulp.dest("dist"); //save app.js in dist directory
});
So add this gulpfile.js in your project root folder and every time you make code changes, go to the project root folder in the command line and run the command "gulp js". This will run the js task and concatenate all your JS files and store it in a file called app.js in the dist directory. And in your index.html file you can always point to this one file dist/app.js.
They can only recognize each other, if they are added as script files. A best practice is to minify all of the javascript files within your directory structure into one file before publishing.
Brunch is currently building my app and combining the css/js from the app and /app/assets folder but it doesn't copy the index.js file from the root of the app folder.
This is the index file which should become index.html inside the public folder.
I cannot work out how to config Brunch to do this. Any ideas?
Current Config: http://jsbin.com/lakapaxalamo/1
Folder Structure:
Your index.html should be inside app/assets
You can use this plugin, which will also optimize your HTML output: https://www.npmjs.com/package/html-pages-brunch