Experiencing a weird problem that I'm wondering if other people have encountered.
Basically I'm having an issue that when my gulp watch is ran it creates a assets folder inside appName (path: appName/assets/js/modules.js)
It is also making a js file in the assets inside the app folder structure which you can see below.
My question is why is there an assets folder being created as a child of appName when my watch scripts run?
It seems this is default behaviour from Ionic but would like to know how to stop it from being created and just rely on the js file inside app/assets/js/.
I have the below folder structure:
appName
assets // UNWANTED
js
www
app
shared
states
modules.js
routes.js
assets
css
libs
img
js
index.html
gulpfile.js
ionic.project
This is my gulp file:
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sh = require('shelljs');
var paths = {
sass: ['./www/assets/scss/**/*.scss']
};
gulp.task('default', ['sass', 'scripts']);
// Task is to compile the Sass into one file.
gulp.task('sass', function () {
return gulp.src('./www/assets/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./www/assets/css'));
});
// Task is to watch for any changes
gulp.task('watch', function () {
gulp.watch(paths.sass, ['sass']);
gulp.watch('./www/app/**/*.js', ['scripts']);
});
// Concatenates all of our JS into one file.
gulp.task('scripts', function () {
return gulp.src('./www/app/**/*.js')
.pipe(concat('modules.js'))
.pipe(gulp.dest('./www/assets/js/'));
});
gulp.task('install', ['git-check'], function () {
return bower.commands.install()
.on('log', function (data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function (done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
and this is my ionic.project file:
{
"name": "figr",
"app_id": "",
"gulpStartupTasks": [
"sass",
"scripts",
"watch"
],
"watchPatterns": [
"www/**/*",
"www/assets/**/*",
"!www/lib/**/*"
]
}
* UPDATE *
I've updated my question so you can more easily see the folder structure. The problem is that the gulp 'scripts' task appears to be placing modules.js in '/appname/assets/js' (marked with 'UNWANTED' in the folder structure diagram) as well as in './www/assets'.
No idea why. If someone knows please let me know.
but restarting my computer and then running ionic serve fixed my problem. I didn't have to write any code differently just a reboot..
If anyone knows why please add an answer and I'll accept it.
Cheers
Related
browser-sync used with gulp does not refresh the page in the browser even for a simple setup.
Versions: gulp: 4.0.2, browser-sync: 2.26.7, Chrome: 81.0.4044.138
Folder structure:
|- src/
|- index.html
|- dist
gulpfile.js:
const { task, src, dest, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();
task('html', () => {
return src('src/*.html').pipe(dest('dist'));
});
task('browserSync', () => {
browserSync.init({
server: {
baseDir: 'dist'
}
});
});
task(
'watch',
series(
task('html'),
(done) => {
watch('src/*.html', task('html'));
watch('dest/*.html').on('change', browserSync.reload);
done();
},
task('browserSync')
)
);
When I run gulp watch, src/index.html is successfully copied to dest/index.html, and browser-sync is started (Chrome opens the page and shows me "Browsersync connected").
When I make any changes in src/index.html, it is copied to dest/index.html but browser-sync doesn't refresh the page.
I tried replacing browserSync.reload with () => console.log('reloaded') inside watch('dist/*.html').on('change', ...) call, and the log message is shown successfully every time I change src/index.html file (which means that the watcher works properly and browserSync.reload is called). Also tried restarting Chrome.
Any help or advice would be much appreciated.
Update: it starts working if I put watch('dist/*.html', browserSync.reload); inside the browserSync task (which is strange):
task('browserSync', () => {
browserSync.init({
server: {
baseDir: 'dist'
}
});
watch('dist/*.html', browserSync.reload);
});
Another option that helps is adding files property to make browser-sync create its own file watcher:
task('browserSync', () => {
browserSync.init({
server: {
baseDir: 'dist'
},
files: [ 'dist/*.html' ]
});
});
How to compile SASS and minify CSS and create its map with gulp 4 in same task
Im using Gulp 4, i wonder if there is a way to put the css with its map and also put the css minified with its map, But in the same task, i mean something like this:
- css
- main.css
- main.css.map
- main.min.css
- main.min.css.map
My current code actually does it but i have two task
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
//declare the scr folder
let root = '../src' + '/';
let scssFolder = root + 'scss/';
//declare the build folder
let build = '../build/' + '/';
let cssFolder = build + 'css';
// Compile scss into css
function css() {
return gulp
.src(scssFolder + 'main.scss')
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(
sass({
outputStyle: 'expanded',
}).on('error', sass.logError)
)
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFolder));
}
//minify css
function minCSS() {
return gulp
.src(scssFolder + 'main.scss')
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(
sass({
outputStyle: 'compressed',
}).on('error', sass.logError)
)
.pipe(autoprefixer('last 2 versions'))
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFolder));
}
exports.css = css;
exports.minCSS = minCSS;
and id like to know either if i can put in one task or how can i call them in one task for example:
function css() {
return gulp
.src(scssFolder + 'main.scss')
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(
sass({
outputStyle: 'expanded',
}).on('error', sass.logError)
)
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFolder))
//Put here the minify code
.pipe(cleanCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(cssFolder));
}
but the previous code doesn´t work because it creates main.css and main.css.map
Create new function where you run both functions in series from your first code.
Example
function compileAndMinify(){
return gulp.series(css(),minCss());
}
Ok, so I have what I think might be the ultimate solution for this problem if you are using gulp 4. Also I am using babel to write my gulp file in es6 via "gulpfile.babel.js" so pardon if this example looks weird (I split my gulp 4 builds up into multiple js modules).
This is a non question specific answer, but it illustrates how I output min and non min css and source maps in the same task, by having my gulp task run it twice via gulp 4 parallel.
'use strict';
import config from './config';
import yargs from 'yargs';
import { src, dest, parallel, series } from 'gulp';
import concat from 'gulp-concat';
import rename from 'gulp-rename';
import csso from 'gulp-csso';
import sass from 'gulp-sass';
import tildeImporter from 'node-sass-tilde-importer';
import sassVar from 'gulp-sass-variables';
import sourcemaps from 'gulp-sourcemaps';
sass.compiler = require('node-sass');
var args = yargs.argv;
class isolatedVendorBuild {
static build(done, destination, fileName) {
//this is the actual gulp-sass build function, that will be wrapped by two other gulp4 tasks
let internalBuild = ((shouldMin) => {
//store the stream to a variable before returning it, so we can conditionally add things to it
let ret = src(config.paths.srcSharedIsolatedVendorScss)
.pipe(sourcemaps.init())
.pipe(concat(fileName))
.pipe(sassVar({
$env: args.prod ? 'prod' : 'dev'
}))
.pipe(sass({
importer: tildeImporter,
outputStyle: 'nested'
}).on('error', sass.logError));
if (shouldMin) {
//if the function was called with shouldMin true, then reset the stream from the previous stream but with the rename .min and csso call added to it
ret = ret.pipe(rename({ suffix: '.min' }));
ret.pipe(csso({ sourceMap: true }));
}
//reset the stream to the previous ret and add sourcemaps.write and destination output to it
ret = ret.pipe(sourcemaps.write('.'))
.pipe(dest(destination));
//return the complete stream
return ret;
});
//create two wrapper functions for the internal build to be called in gulp since gulp can't pass arguments to functions treated as gulp tasks
function buildStylesUnMinified() {
return internalBuild(false); //pass false for shouldMin and it will output the unminified css and source map
}
function buildStylesMinified() {
return internalBuild(true); //pass true for shouldMin and it will output the minified css and source map with the .min suffix added to the file name.
}
//the magic, we use gulp parallel to run the unminified version and minified version of this sass build at the same time calculating two separate streams of css output at the same time.
return parallel(buildStylesUnMinified, buildStylesMinified)(done);
}
}
export default isolatedVendorBuild;
I've seen other solutions that involve outputting the non minified css first, then using that as an input for the minification task. That works, but it forces synchronous dependencies and that get's build times crawling to a snails pace in complex builds.
I came up with this method just recently solving for this in a new project with multiple scss output files. I like it because both minified and unminified tasks run at the same time and I was able to get my main build to let the entire scss output process be async, as in, not depend on it completing before doing the scripts and stuff.
Today I migrated to Gulp 4, but I'm not able to get my watch function to work.
// Watch
gulp.task('watch', gulp.series('typescript', 'sass', 'browserSync', function(){
gulp.watch('./app/styles/**/*.scss', gulp.series('sass'));
gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
gulp.watch('./app/*.html', browserSync.reload);
}));
typescript, sass, browserSync will run but watch does not react to file changes.
I just had the same problem. You don't actually have a reference to the initialized browserSync inside your watch gulp task. Instead of having your browserSync.init function in a separate browserSync gulp task, move it to inside your watch task, and it should work. Hope this helps!
Example:
gulp.task('watch', gulp.series(function (){
browserSync.init({
proxy:"http://localhost:8888",
injectChanges: true,
plugins: ["bs-html-injector?files[]=*.html"]
});
var html = gulp.watch('development/index.html');
html.on('change', function(path, stats) {
console.log('you changed the html');
browserSync.notify("Compiling, please wait!");
browserSync.reload("index.html");
})
var js = gulp.watch('development/**/*.js');
js.on('change', function(path, stats) {
console.log('you changed the js');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
var css = gulp.watch('development/**/*.css');
css.on('change', function(path, stats) {
console.log('you changed the css');
browserSync.notify("Injecting CSS!");
browserSync.reload("*.css");
})
}));
Change gulp.watch('app/scripts/**/*.ts', gulp.series('typescript')); to a absolute gulp.watch('./app/scripts/**/*.ts', gulp.series('typescript'));
Also i normally stick this syntax, per task.
var watcher = gulp.watch('js/**/*.js', gulp.parallel('concat', 'uglify'));
watcher.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
});
I had some issues too, and i found this tutorial of gulp 4, this is my gulpfile to compile scss and watch the Scss files, concat and compile to a main.min.css with autoprefix.
var gulp = require('gulp'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass');
//task para o sass
var paths = {
styles: {
src: 'scss/**/*.scss',
dest: 'css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(concat('main.min.css'))
.pipe(autoprefixer({
browser: ['last 2 version', '> 5%'],
cascade: false
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp.watch(paths.styles.src, styles);
}
var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);
I think that on the gulp v4 you need to use the gulp.parallel. I'm digging to learn more about the new version.
I am trying to set the Gulp tasks for styles with postcss, CSS modules etc., but for now only the watch task for the main HTML file is working, and it is not even creating the main CSS file nor the temp folder so I get the error in the console that it can not find the styles.css. It's driving me crazy for days but just cannot get to the bottom of it. Here is my file structure, pretty basic:
application -> views -> index.html
public -> gulp -> tasks -> styles.js, watch.js
-> styles (styles.css inside, base and modules for CSS subfolders)
And here are the styles and watch tasks:
var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
notify: false,
server: {
baseDir: "../application/views"
}
});
watch('../application/views/index.html', function(){
browserSync.reload();
});
watch('../application/public/styles/**/*.css', function(){
gulp.start('cssInject');
});
});
gulp.task('cssInject', ['styles'], function(){
return gulp.src('../application/temp/styles')
.pipe(browserSync.stream());
});
Styles:
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba');
gulp.task('styles', function(){
return gulp.src('../application/public/styles/styles.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
.on('error', function(errorInfo){
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('../application/temp/styles'));
});
If someone can give a piece of advice I would be really grateful.
I try to understand how to use gulp with these useful and popular plugins. There are what I have:
runned go(lang) server on localhost:8000
static/local html files under app folder which are used by server to form pages
scss files under the same directory, which are converted into css and then autoprefixed
Here is my gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload');
// "./" - it's "app" directory
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(watch('./*.scss'))
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(gulp.dest('./'));
});
So what I need:
watch html, css/scss files for change and make reload on localhost:8000 (chrome's open tab)
it will be great if there is no need to use:
livereload chrome plugin
expressjs framework
reload html pages if it opened directly just like file without server
I've read that it is possible to achieve this by using gulp-embedlr and gulp-webserver. If so, how to do it?
Ok, the best solution that I find is using Gulp + BrowserSync! It's great solution.
Here is the code of my gulpfile.js:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('browserSync', function() {
browserSync({
//logConnections: false,
//logFileChanges: false,
notify: false,
open: false,
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(reload({stream:true}));
});
gulp.task('watch', function() {
gulp.watch('./css/*.scss', ['sass']);
gulp.watch('./*.html', reload);
});
gulp.task('default', ['watch', 'sass', 'browserSync']);
There is no sense to explain the code above. Just read this: http://www.browsersync.io/docs/gulp/