I'm using Gulp to dome some tasks on my SCSS and CSS. Now the problem is that when I run Gulp it's starting the watch but nothing is happening: no css is being created. I triple checked the folder structure and it's can.
This is my code:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
gulp.task('sass', function () {
return gulp.src('resources/assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({browsers: ['last 2 version']}))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
});
gulp.task('default', function () {
watch('resources/assets/sass/**/*.scss', function () {
gulp.start('sass');
});
});
Temporary Solution
After a long search with some people it's just PHPStorm that's not showing the updated file. The file has to be accessed first. It's like a sort of caching.
When I save the .scss file, and immediatly open it with notepad, or access a php file which uses the file, then it also updates in PHPStorm.
Try this one
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('sass', function () {
return gulp.src('resources/assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({browsers: ['last 2 version']}))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
});
gulp.task('default', function () {
gulp.watch('resources/assets/sass/**/*.scss', ['sass']);
});
I don't think you really need another plugin to complie your sass files, gulp.watch works just fine.
So basically what I am doing here is, I am just telling gulp to watch all the sass files in that folder and whenever there's a change, just run the task in the given array ['sass'].
The solution is a PHPStorm Setting
It seems that PHPStorm uses a form of file caching, that's why I didn't see the reflected changes. The solution can be found here!
How to prevent phpstorm to reload file without prompt when file on disk is changed?
Related
I created a project with gulp js, installed bootstrap, browse-sync and sass.
My gulpfile.js file looks like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));
gulp.task('sass', () => {
return gulp.src("./sass/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/"))
.pipe(browserSync.stream());
});
gulp.task('start', gulp.series('sass', function() {
browserSync.init({
server: "./"
});
gulp.watch("sass/*.scss", gulp.series('sass'));
gulp.watch("./*.html").on('change', browserSync.reload);
}));
gulp.task('default', gulp.series('start'));
When I use the Ctrl + S command in HTML and SCSS files, my project is saved and browser is reloaded; but I want to do this also for my JS files. Can you help me?
Very similar to the way you are dealing with your css, but you can use other plugins like terser to compress your javascript. Here is my js function which concatenates and minifies my javascript before reloading via browsersync
const concat = require('gulp-concat');
const terser = require('gulp-terser');
function js() {
return src(['./js/*.js'])
.pipe(concat('scripts.min.js'))
.pipe(terser())
.pipe(dest('js'))
.pipe(browsersync.stream());
}
i new with gulp and i have a problem that i can't know why.
I want to minify my js and css, with the code below, works, but only works if i call minify-js and minify-css into default.
Gulp watch not work and i don't know why.
If a delete the .min with watch running, he creates the .min file, but came empty. All problems i have found came with solutions that my code already have.
var css = [
'./css/estilo.css'
];
var js = [
'./js/app.js'
];
var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var watch = require('gulp-watch');
var cssmin = require("gulp-cssmin");
var stripCssComments = require('gulp-strip-css-comments');
gulp.task('minify-css', function(){
gulp.src(css)
.pipe(stripCssComments({all: true}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./css/min/'));
});
gulp.task('minify-js', function () {
gulp.src(js)
.pipe(jsmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./js/min/'));
});
gulp.task('default', function() {
gulp.start('watch');
});
gulp.task('watch', function() {
gulp.watch(js, ['minify-js']);
gulp.watch(css, ['minify-css']);
});
Change
gulp.task('default', function() {
gulp.start('watch');
});
to:
gulp.task('default', ['watch']);
This will set the default task's dependency as watch, running watch when default is called.
Also, instead of running gulp, you can run gulp watch to start watching your files. If you make a change to ./css/estilo.css or ./js/app.js, gulp will change it automatically.
Make sure safe write is turned off in your editor (if you use JetBrains this guide should work), and the /css and /min directories have been created.
i am currently learning about gulp.js.
as i saw the tutorial and documentation of gulp.js, this code:
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
makes the uglified javascript file with create new directory named 'minjs'. of course, i installed gulp-uglity with --dev-save option. there is no error message on the console so i don't know what is the problem. i tried gulp with "sudo", but still not working.
so i went to the root directory and searched all filesystem but there is no file named 'minjs' so i guess it just not working. why this is happening? anyone knows this problem, it would be nice why this is happening.
whole source code:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('default', function() {
console.log('mifying scripts...');
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
});
I had the same problem; you have to return the task inside the function:
gulp.task('default', function() {
return gulp.src("js/*.js")
.pipe(uglify())
.pipe(gulp.dest('minjs'));
Also, minjs will not be a file, but a folder, where all your minified files are going to be saved.
Finally, if you want to minify only 1 file, you can specify it directly, the same with the location of the destination.
For example:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
gulp.task('browserify', function() {
return browserify('./src/client/app.js')
.bundle()
// Pass desired output filename to vinyl-source-stream
.pipe(source('main.js'))
// Start piping stream to tasks!
.pipe(gulp.dest('./public/'));
});
gulp.task('build', ['browserify'], function() {
return gulp.src("./public/main.js")
.pipe(uglify())
.pipe(gulp.dest('./public/'));
});
Hope it helps!
Finally I resolved the question like this:
It was a directory mistake so the gulp task hasn't matched any files; then it couldn't create the dest directory (because no files in output).
const paths = {
dest: {
lib: './lib',
esm: './esm',
dist: './dist',
},
styles: 'src/components/**/*.less',
scripts: ['src/components/**/*.{ts,tsx}', '!src/components/**/demo/*.{ts,tsx}'],
};
At first my scripts was ['components/**/*.{ts,tsx}', '!components/**/demo/*.{ts,tsx}']
And that hasn't matched any files.
I receive custom js and css script as a string through html form. This strings are then saved in files on filesystem. The question is how to minify those files every time they are generated/updated. I am using gulp and laravel elixir.
My first idea was to call exec("gulp something") but not sure how to configure gulp.
Requirments:
gulp-newer
minifyCss
gulp-uglify
First step:(install plugins)
minifyCss and gulp-uglify are used by laravel-elixir. You have to install gulp-newer by npm install gulp-newer --save-dev.
Second step:(define task)
You need to define different tasks for css and js.
CSS task
gulp.task('cssTask', function() {
return gulp.src(cssSrc)
.pipe(newer(cssDest))//compares the css source and css destination(css files)
.pipe(minifyCss())//minify css
.pipe(gulp.dest(cssDest));//save minified css in destination directory
});
Js task
gulp.task('jsTask', function() {
return gulp.src(jsSrc)
.pipe(newer(jsDest))//compares the js source and js destination(js files)
.pipe(uglify())//minify js
.pipe(gulp.dest(jsDest));//save minified js in destination directory
});
Third step:(define custom watch)
You should have a watch task which watches your source directories(cssSrc and jsSrc) and calls its related task.
gulp.task('custom', function() {//Watch task
gulp.watch(cssSrc, ['cssTask']);//watch your css source and call css task
gulp.watch(jsSrc, ['jsTask']);//watch your js source and call js task
});
Fourth step:(run custom watch)
Finally, you must run the custom task by gulp custom.
Conclusion:
Every time, when file is added to the source directory. Gulp will minify the file and store it in destination directory. This is tested locally and it works perfectly.
Completed Gulp file
var gulp = require('gulp');
var elixir = require('laravel-elixir');
var newer = require('gulp-newer');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
cssSrc = 'cssSrc/*.css';//Your css source directory
cssDest = 'cssDest';//Your css destination directory
jsSrc = 'jsSrc/*.js';//Your js source directory
jsDest = 'jsDest';//Your js destination directory
gulp.task('cssTask', function() {
return gulp.src(cssSrc)
.pipe(newer(cssDest))//compares the css source and css destination(css files)
.pipe(minifyCss())//minify css
.pipe(gulp.dest(cssDest));//save minified css in destination directory
});
gulp.task('jsTask', function() {
return gulp.src(jsSrc)
.pipe(newer(jsDest))//compares the js source and js destination(js files)
.pipe(uglify())//minify js
.pipe(gulp.dest(jsDest));//save minified js in destination directory
});
gulp.task('custom', function() {//Watch task
gulp.watch(cssSrc, ['cssTask']);//watch your css source and call css task
gulp.watch(jsSrc, ['jsTask']);//watch your js source and call js task
});
Edited after comment:
I would like something like this: gulp custom srcFile destFile.
For that situation, you need to install new plugin which is called yargs.
Installation:
You can install yargs by npm install yargs --save-dev and then you have to pass source directory and destination directory when custom task is called.
gulp custom --cssSrc=cssSource --cssDest=cssDestination --jsSrc=jsSource --jsDest=jsDestination
For example:
gulp custom --cssSrc=cssSrc/*.css --cssDest=cssDest --jsSrc=jsSrc/*.js --jsDest=jsDest
The completed Gulp file:
var gulp = require('gulp');
var elixir = require('laravel-elixir');
var newer = require('gulp-newer');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var argv = require('yargs').argv;
cssSrc = argv.cssSrc;
cssDest = argv.cssDest;
jsSrc = argv.jsSrc;
jsDest = argv.jsDest;
gulp.task('cssTask', function() {
return gulp.src(cssSrc)
.pipe(newer(cssDest))
.pipe(minifyCss())
.pipe(gulp.dest(cssDest));
});
gulp.task('jsTask', function() {
return gulp.src(jsSrc)
.pipe(newer(jsDest))
.pipe(uglify())
.pipe(gulp.dest(jsDest));
});
gulp.task('custom', function() {
gulp.watch(cssSrc, ['cssTask']);
gulp.watch(jsSrc, ['jsTask']);
});
Note: Every time, the source directory or destination directory is changed, gulp task must be called again.
Use the below gulp modules.
https://www.npmjs.com/package/gulp-minify-css - Minify all your css files.
https://www.npmjs.com/package/gulp-concat-css - Merge all your css in to one file.
https://www.npmjs.com/package/gulp-uglify - Minigy all your JS files.
https://www.npmjs.com/package/gulp-sass - SASS
Refer this answer:
Gulp minify multiple js files to one
Below is sample Gulp File Snippet.
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
// Clean
gulp.task('clean', function() {
return gulp.src(['css', 'js', 'img'], {
read: false
})
.pipe(clean());
});
gulp.task('styles', function() {
return gulp.src('sass/styles.scss')
.pipe(sass({
style: 'expanded'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('css'))
.pipe(notify({
message: 'Styles task complete'
}));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('sass/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('js/**/*.js', ['scripts']);
// Watch image files
gulp.watch('img/**/*', ['images']);
// Create LiveReload server
var server = livereload();
// Watch any files in dist/, reload on change
gulp.watch(['sass/**', 'js/**', 'img/**', '*.html']).on('change', function(file) {
server.changed(file.path);
});
});
gulp.task('default', ['styles', 'scripts', 'watch']);
At first place, you need to store the content in a new file. A good place for this is resources/assets/js:
$jsContent = $request->get('js_custom_content');
file_put_contents(base_path('resources/assets/js/custom.js'), $jsContent);
Ok, once created the javascript file, you need to tell to elixir to minify the custom script:
// it will look for resources/assets/js/custom.js
// and it will compress the output to public/assets/js/custom.min.js
mix.scripts(['custom.js'], 'public/assets/js/custom.min.js');
Optionally, you can version it. That means that everytime the script's content change, gulp will generate a new version in order to avoid browser's cache issues:
mix.version(['public/assets/js/custom.min.js']);
Finally, load the script in your view:
<script type="text/javascript" src="{{ url('assets/js/custom.min.js')) }}"></script>
Or with version:
<script type="text/javascript" src="{{ url(elixir('assets/js/custom.min.js')) }}"></script>
I have a simple gulpfile that loads a javascript object from a json file (to get paths based on environment), compiles my scss files, moves them to my public directory, and also moves any javascript files to the public directory.
So my assets in /app/Http/assets/js and scss
are compiled and moved to /public/assets/js and css
Here is my gulpfile.js:
var gulp = require('gulp');
var gutil = require('gulp-util');
var notify = require('gulp-notify');
var sass = require('gulp-sass');
var autoprefix = require('gulp-autoprefixer');
// Load the application config
var config = require('./env.config.json');
// Where do you store your Sass files?
var sassDir = 'app/Http/Assets/scss';
// Which directory should Sass compile to?
var targetCSSDir = config.assets_path + '/css';
// Where do you store your CoffeeScript files?
var jsDir = 'app/Http/Assets/js';
// Which directory should CoffeeScript compile to?
var targetJSDir = config.assets_path + '/js';
/** Tasks **/
// Compile Sass, autoprefix CSS3, and save to target CSS directory
gulp.task('css', function () {
return gulp.src(sassDir + '/**/*.scss')
.pipe(sass())
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(targetCSSDir))
.pipe(notify('CSS minified'))
});
// Move Javascript
gulp.task('js', function () {
return gulp.src(jsDir + '/**/*.js')
.pipe(gulp.dest(targetJSDir))
});
// Keep an eye on Sass and Javascript files for changes...
gulp.task('watch', function () {
gulp.watch(sassDir + '/**/*.scss', ['css']);
gulp.watch(jsDir + '/**/*.js', ['js']);
});
// What tasks does running gulp trigger?
gulp.task('default', ['css', 'js', 'watch']);
This is working fine for my javascript. Also, when I run "gulp" the first time, it compiles all my scss files and moves them accordingly. However, the watch task is not working for my scss files. It DOES work for javascript files. What's really weird (to me) is that when I change my scss source to a specific file, the watch works. So,
gulp.task('css', function () {
return gulp.src(sassDir + '/**/app.scss')
.pipe(sass())
// and the rest is the same
will watch AND compile any changes to my app.scss file, but obviously not to any other scss files.
I have re-arranged and googled all I can. I don't understand why it won't work for watching scss.
EDIT: Strangely, it seems to be notify that is breaking the css watcher. When I comment it out like so:
gulp.task('css', function () {
return gulp.src(sassDir + '/**/*.scss')
.pipe(sass())
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(targetCSSDir))
//.pipe(notify('CSS minified'))
});
everything works as expected.
Thanks in advance.