I am trying to run Gulp and save license data like jQuery license info.
Gulp runs fine files are minimized but no license file: This is what I have in my Gulp file.
var gulp = require('gulp'),
saveLicense = ('uglify-save-license'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('scripts/*.js', {
output: {
comments: saveLicense
}
}
).pipe(uglify()).pipe(gulp.dest('publish_folder/scripts'));
console.log('Task Completed');
});
I'm very new to Gulp.
The saveLicense object must be passed to the uglify plugin, not to gulp.src. Try this:
var gulp = require('gulp'),
saveLicense = require('uglify-save-license'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('scripts/*.js')
.pipe(uglify({
output: {
comments: saveLicense
}
}))
.pipe(gulp.dest('publish_folder/scripts'));
console.log('Task Completed');
});
PS: Also I think you make a typo, you forget to write require when loading uglify-save-license plugin.
Related
I'm usign postcss/precss with gulp to convert my scss markup to valid css. This is my gulpfile.js:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
gulp.task('stream', function () {
var processors = [
precss
];
return watch('src/*.css', { ignoreInitial: false })
.pipe(postcss(processors))
.pipe(gulp.dest('dest'));
});
gulp.task('default', gulp.parallel('stream'));
The problem is that it doesn't change file extensions, so I need to write scss in *.css files, and what I am trying to do is to set it to read scss from *.scss files and output css into *.css files. Can anybody tell me how to achieve that?
Not an expert on this, so I'll just share how we do sass compilation.
We use gulp-concat to concat the files together into one .css file. Your gulp snippet would be as follows:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('stream', function () {
var processors = [
precss
];
return watch('src/*.css', { ignoreInitial: false })
.pipe(postcss(processors))
.pipe(concat('FILENAME.css'))
.pipe(gulp.dest('dest'));
});
gulp.task('default', gulp.parallel('stream'));
Don't forget to do npm install --save-dev gulp-concat first!
I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);
So I've got a problem with my gulp.watch task. So the short version of my gulpfile.js is:
var gulp = require('gulp'),
usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
minifyCss = require('gulp-minify-css'),
minifyJs = require('gulp-uglify'),
concat = require('gulp-concat'),
less = require('gulp-less'),
rename = require('gulp-rename'),
minifyHTML = require('gulp-minify-html'),
rimraf = require('gulp-rimraf'),
live = require('gulp-livereload'),
strip = require('gulp-strip-debug'),
gulpif = require('gulp-if');
var paths = {styles: 'public-src/less/*.*'};
gulp.task('delete-css', function (cb) {
return gulp.src(paths.css_delete)
.pipe(rimraf());
});
gulp.task('custom-less', ['delete-css'], function (cb) {
return gulp.src(paths.styles)
.pipe(less())
.pipe(gulp.dest('public/css'));
});
gulp.task('watch', function () {
gulp.watch([paths.styles],['custom-less']);
});
Also I've got a build task which contains custom-less task, which actually works. Here it is
gulp.task('build-custom', ['custom-less']);
gulp.task('build', ['build-custom']);
So when i ran gulp build css is concatenated to one file. When I edit my css in terminal I see that task custom-less is starting and finished, but the css file does not get updated. I cant seem to understand why the same task works when you run it using gulp build but when you watch it, it does not change...
Hope anyone has ideas?
I've got the following code to concatenate and minify my .css files :
var gulp = require('gulp'),
concatCSS = require('gulp-concat-css'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
autoprefixer = require('gulp-autoprefixer');
//Concat CSS
gulp.task('concat', function () {
return gulp.src('css/*.css')
.pipe(concatCSS('css/bundle.css'))
.pipe(rename('bundle.min.css'))
.pipe(minifyCSS('bundle.min.css'))
.pipe(gulp.dest('out/'));
});
//Watch HTML and reload
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./app"
}
});
browserSync.watch("app/*.html").on("change", reload);
});
//Default
gulp.task('default', ['serve', 'concat']);
Although Terminal shows no errors the code for concatenation and minifying is not working.
What should I fix to solve the issue?
The structure of my project:
UPD!
In my case there were some syntactic mistakes in .css files. Works well after correcting them and removing minifyCSS since it's no longer supported.
I wanna do this thing:
I have a folder with many js files. When I save one of them, I want to save the minified file in other folder.
I got it partially, because my script watch many files and when I change one, all files are copied and minified to the destination folder.
I discover recently that gulp.run is not used anymore.
If someone could help me, I'll be greatful.
I was trying this way:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";
gulp.task('dist-file', function(file) {
gulp.src(file)
.pipe(uglify())
.pipe(gulp.dest(path_prod));
});
gulp.task('default', function() {
gulp.watch(files_dev).on("change", function(file) {
gulp.run('dist-file');
});
dist-file doen't need to be a gulp task, you can make that a function which you can pass the file or glob to process. Also watch is part of gulp now so you shouldn't need gulp-watch.
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";
function uglifyFile (file) {
gulp.src([file])
.pipe(uglify())
.pipe(gulp.dest(path_prod));
}
gulp.task('watch-test', function() {
gulp.watch(files_dev).on("change", function (event) {
uglifyFile(event.path);
});
});