At my internship I had to make a starter using dependancies inside a package.json . And somehow , I could delete the node modules and still run gulp, async and other things you can see in there. Now , I have gulp installed globaly andn i have these dependancies written but when I remove node_modules , terminal says it doesn't recognise gulp. Is there a way to do this ?
The reason for removing node_modules was that it is a really big folder and as I needed to transfer my projects , they showed my how to remove it .
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var iconfont = require('gulp-iconfont');
var async = require('async');
var consolidate = require('gulp-consolidate');
var sassLint = require('gulp-sass-lint');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
gulp.task('sass-lint', function () {
return gulp.src('app/scss/**/*.s+(a|c)ss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
});
gulp.task('watch', ['sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass' , 'sass-lint' ]);
});
gulp.task('build', function (callback) {
runSequence(['sass'],
callback
)
});
gulp.task('iconfont', function(done){
var iconStream = gulp.src(['app/images/svg/*.svg'])
.pipe(iconfont({
fontName: 'icons',
}));
async.parallel([
function handleGlyphs(cb) {
iconStream.on('glyphs', function(glyphs, options) {
gulp.src('conf/_iconfont-template.scss')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: 'icons',
fontPath: '../fonts/',
className: 's'
}))
.pipe(gulp.dest('app/scss/utilities/'))
.on('finish', cb);
});
},
function handleFonts (cb) {
iconStream
.pipe(gulp.dest('app/fonts/'))
.on('finish', cb);
}
], done);
});
This is my gulpfile.js.
P.S. This also made it so I dont have to install erything everytime . Just do it once , and I can copy the starter.
Ok so i managed to solve the issue . Gulp was updated to version 4 so I needed to change the code and use
gulp.task('watch', gulp.series('sass'), function (){
gulp.watch('app/scss/**/*.scss', gulp.series(gulp.parallel('sass' , 'sass-lint' )));
});
Related
I have a gulpfile with some tasks. All task are combined in a default task, that has dependencies to all others tasks. I want to add a deploy task. The deploy can take a list of files. I want only deploy changed files.
Is there a way to get the pipes of all dependencies? Or any other way, without merge everything into one task?
Here a simple sample to explain:
var gulp = require('gulp');
var concat = require('gulp-concat');
var debug = require('gulp-debug');
var newer = require('gulp-newer');
gulp.task('default', ['js', 'css']);
gulp.task('js', function () {
return gulp.src('./app/**/*.js')
.pipe(newer('./dist/app.js'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css', function () {
gulp.src('./app/**/*.css')
.pipe(newer('./dist/style.css'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('deploy', ['default'], function () {
gulp.src('./dist/*')
// Here I want only files changed in dist
.pipe(debug());
});
Update:
Here some more of my task:
gulp.task('default', ['js', 'css', 'images', 'templates']);
gulp.task('images', function () {
return gulp.src('./app/images/*')
.pipe(newer('./dist/app/images'))
.pipe(gulp.dest('./dist/app/images'));
gulp.task('templates', function () {
return gulp.src('./app/**/*.html')
.pipe(newer('./dist/app/templates.js'))
.pipe(minifyHTML({ empty: true }))
.pipe(templateCache({ module: 'app' }))
.pipe(uglify())
.pipe(gulp.dest('./dist/app'));
I added a deployed folder, where i keep track of all files that a deployed.
var gulp = require('gulp');
var concat = require('gulp-concat');
var debug = require('gulp-debug');
var newer = require('gulp-newer');
gulp.task('default', ['js', 'css']);
gulp.task('js', function () {
return gulp.src('./app/**/*.js')
.pipe(newer('./dist/app.js'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css', function () {
gulp.src('./app/**/*.css')
.pipe(newer('./dist/style.css'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('deploy', ['default'], function () {
gulp.src('./dist/*')
.pipe(newer('./deployed'))
.pipe(debug())
.pipe(gulp.dest('./deployed'))
});
I am trying to create a basic gulp build process template that starts with an app folder containing html, sass, javascript, and image files and builds those files into a public folder. I am using gulp to watch the app folder for changes and then automatically refreshing the build process to the public folder.
I using browser-sync to serve the public folder and watch for changes but it doesn't seem to automatically reload when a change to the public folder is made. If I manually refresh the browser the changes are reflected.
Thanks for the help, see below for my gulp file:
//BASIC GULP FILE SETUP
//-------------------------------------------------------------
//Include Gulp
var gulp = require('gulp');
//General Plugins
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var del = require('del');
var watch = require('gulp-watch');
var runSequence = require('run-sequence');
//CSS Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
//JS Plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//HTML Plugins
var minifyHTML = require('gulp-minify-html');
//IMG Plugins
//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------
//Clean Public Folder
gulp.task('clean', function() {
del(['public/**/*']);
});
//CSS Tasks
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(csso())
.pipe(gulp.dest('public/css'));
});
//HTML Tasks
gulp.task('html', function () {
return gulp.src(['./app/**/*.html'], {
base: 'app'
})
.pipe(minifyHTML())
.pipe(gulp.dest('public'))
;
});
//Image Tasks
gulp.task('image', function () {
return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
.pipe(gulp.dest('public/images'));
});
//JS Tasks
gulp.task('js', function () {
return gulp.src('app/js/**/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch files for changes
gulp.task('watch', function() {
// Watch HTML files
gulp.watch('./app/*.html', ['html'], browserSync.reload);
// Watch Sass files
gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
// Watch JS files
gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
// Watch image files
gulp.watch('./app/img/*', ['image'], browserSync.reload);
});
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
});
gulp.task('defualt');
gulp.task('build', [], function(callback) {
runSequence('clean',
'sass',
'html',
'js',
'image');
});
I did a little more poking around the forums and the browser-sync documentation. In my serve task I needed to add a watch function to the Public directory that would manually call the reload every time a change was detected. So my 'browser-sync' task, now renamed 'serve', needs to look like this:
//Browser Sync Server
gulp.task('serve', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
gulp.watch("./public/**/*").on("change", browserSync.reload);
});
I am sure there is a way to do this with browser-sync's streams as well, but this manual reload method found in the docs has done the trick.
Try passing in a files object in the init function so it knows what to look for. No need for a different watch task, Browsersync does all that for you.
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
},
files: [
'**/*.css',
'**/*.js',
'**/*.html'
// etc...
]
});
});
What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))
I don't understand what's wrong with this code. When I run it for the first time, rev_collector doesn't work. I mean: 'rev' and 'clean' works great, but css file name in index http didn't change ('rev_collector').
BUT it works properly when I start it again.
var gulp = require('gulp'),
less = require('gulp-less'),
rev_append = require('gulp-rev-append'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
gutil = require('gulp-util'),
rimraf = require('rimraf'),
revOutdated = require('gulp-rev-outdated'),
path = require('path'),
through = require('through2');
gulp.task('rev', function(){
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(rev())
.pipe(gulp.dest('./www/css/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./src/manifest/'));
});
gulp.task('rev_collector', ['rev'], function(){
return gulp.src(['./src/manifest/**/*.json', './www/index.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('./www/'));
});
function cleaner() {
return through.obj(function(file, enc, cb){
rimraf( path.resolve( (file.cwd || process.cwd()), file.path), function (err) {
if (err) {
this.emit('error', new gutil.PluginError('Cleanup old files', err));
}
this.push(file);
cb();
}.bind(this));
});
}
gulp.task('clean', ['rev_collector'], function() {
gulp.src( ['./www/**/*.*'], {read: false})
.pipe( revOutdated(1) ) // leave 2 latest asset file for every file name prefix.
.pipe( cleaner() );
return;
});
gulp.task('rev_all', ['rev', 'rev_collector', 'clean']);
Today, I met the same problem.
After I got nothing from this page, I searched a lot.
I fount my problom came from the order the files loaded.
So I use a new plugin:
var runSequence = require('run-sequence');
then, I rewrite the load code:
gulp.task('default',['build']);
gulp.task('build', function (done) {
runSequence(
['clean'],
['images'],
['statcstyles', 'staticjs'],
['scripts'],
['styles'],
['html'],
done);
});
The code make sure that revCollector will always loaded after manifest create.
Then my problem solved.
I hope it helps you.
what's wrong with this code:
var gulp = require('gulp');
var watch = require('gulp-watch');
var connect = require('gulp-connect');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
//lint
module.exports = gulp.task('lint', function () {
return gulp.src([config.paths.src.scripts,config.paths.exclude.bower])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
//watch
module.exports = gulp.task('watch', function () {
watch(config.paths.src.scripts, ['lint'])
.pipe(connect.reload());
watch(config.paths.src.templates, ['templates'])
.pipe(connect.reload());
watch(config.paths.src.index)
.pipe(connect.reload());
});
when ie I edit a js file doing an error
jshint show me nothing.
This works:
watch(config.paths.src.scripts)
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(connect.reload());
but it's quite the same or not ?
gulp-watch does not support an array of task names like the internal gulp.watch. See documentation at https://www.npmjs.org/package/gulp-watch
You have to provide gulp-watch a function, something like
watch(config.paths.src.scripts, function(events, done) {
gulp.start(['lint'], done);
}
Note: It seems that gulp.start will be deprecated in Gulp 4.x, it will be replaced by a task runner called bach: https://github.com/floatdrop/gulp-watch/issues/92