I've created the file gulp.js, the code is below.
When I type gulp sass or node gulp sass or node gulp.js, nothing happens in node (it is supposed to print 10).
What am I doing wrong?
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
console.log(10);
})
Change task name to sass-task and then try gulp sass-task
Related
I have bought template MaterialPro from wrappixel website. After I got the template package already, I have followed getting started installation from document attached with template as the following:
Install Node.js From https://nodejs.org/en/download/
Open terminal navigating to material-pro/
Install npm: npm install --global npm#latest
Install yarn: npm install --global yarn
Install gulp: npm install --global gulp-cli
Copy gulp: gulp copy
The gulpfile.js inside root template is like this:
//gulpfile.js
console.time("Loading plugins"); //start measuring
const gulp = require('gulp'),
minifyCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
npmDist = require('gulp-npm-dist');
console.timeEnd('Loading plugins');
const sassFiles = 'src/assets/scss/*.scss',
cssDest = 'dist/css/';
//compile scss into css
function style() {
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
}
//This is for the minify css
async function minifycss() {
return gulp.src(['dist/css/*.css', '!dist/css/**/*.min.css'])
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyCSS())
.pipe(gulp.dest(cssDest));
}
// This is for the minifyjs
async function minifyjs() {
return gulp.src(['dist/js/custom.js','dist/js/app.js', '!dist/js/custom.min.js', '!dist/js/app.min.js'] )
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
}
// Copy dependencies to ./public/libs/
async function copy() {
gulp.src(npmDist(), {
base: './node_modules'
})
.pipe(gulp.dest('./src/assets/libs'));
};
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style);
gulp.watch(['dist/css/style.css'], minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
gulp.task('default', watch);
exports.style = style;
exports.minifycss = minifycss;
exports.minifyjs = minifyjs;
exports.copy = copy;
exports.watch = watch;
After all, I made some changes to the template scss file, and run gulp command. At this point, the gulp command run never finished unitl now with output on terminal like this
Loading plugins: 539.410ms
[17:01:03] Using gulpfile ~/Documents/documentation/materialpro-bootstrap-latest/material-pro/gulpfile.js
[17:01:03] Starting 'default'...
[17:01:03] Finished 'default' after 18 ms
What was going wrong with this? Please kindly help, thanks.
P.S: Pls apologized if my question is incomplete or something, if I will try to add some more detail if suggested.
Your gulp code is fine. Made some change on your scss or js file it will show some changes.
Exaplantion
Your default command is gulp.task('default', watch);
when you run gulp it starts to watch your scss, css, js code. If there is new change it will execute the command.
Suggestion. Use like this.
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style, minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
When running the following code I receive the following error:
[23:00:29] Task never defined: default
[23:00:29] To list available tasks, try running: gulp --tasks
gulp -v
CLI version: 2.2.0
Local version: 4.0.1
Can you let me know what I'm doing wrong here?
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
//compile scss into css
function style() {
//1. where is my sass file going to be
return gulp.src('./scss/**/*.sass')
//2. pass that file through sass compiler
.pipe(sass())
//3.Where do I save the compiled css
.pipe(gulp.dest('./css'))
}
exports.style = style;
Like the error says, you aren't defining a default task.
Either
run gulp style, or
export style as default (exports.default = style)
Anyone know how to have a sound ( like grunt ) when gulp throw a error during compile/watch ?
l need to setup something special for gulp for have this feature ?
UPDATE: It should be noted that gulp-util has been deprecated and should not be used.
There is the ubituious gulp-util plugin. One of the features that it provides is the "gutil.beep();" function.
in your project's root execute:
npm install gulp-util --save-dev
then in your Gulpfile.js:
var gutil = require('gulp-util');
gutil.beep();
You can work with gulp-plumber which is excellent for handling errors in gulp streams. Setup the errorHandler method which will call the beeper() method provided by the NPM library - beeper
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var beeper = require('beeper'); //https://www.npmjs.com/package/beeper
gulp.task('compile-sass', function () {
return gulp.src('blob/for/files.scss')
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(gulp.dest('dest/'));
});
function errorHandler(error) {
// 3 beeps for error
beeper(3); // https://www.npmjs.com/package/beeper
return true;
}
Now, whenever there is an error in compiling sass, you will get 3 beeps to notify you that there was an error.
Good Luck.
npm install -g gulp-crash-sound
Source: https://www.npmjs.com/package/gulp-crash-sound
I'm running gulp 3.9.0 and calling some gulp commands from Visual Studio 2013. The flow is such that whenever I build in VS, gulp should clean my temporary and output files, then after a successful build, compile my javascript assets into one file.
The problem is that, I've noticed that after running "gulp build", sometimes my assets are not generated at all. This even happens on the command line. After running "gulp clean" (which removes the output), I have to run "gulp build" twice just to see the output materialize. It's as if gulp is failing silently. Not sure if this is an issue with Node running on Windows or if I have misconfigured something.
Note that VS is responsible for compiling all TypeScript files into a single .js in the \output folder.
Apologies in advanced if there is a better way to do what I'm trying to do. Still a gulp/node newbie.
VS Pre-Build:
gulp clean
VS Post-Build:
gulp build
gulpfile.js:
var gulp = require('gulp');
var del = require('del');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var templateCache = require('gulp-angular-templatecache');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');
gulp.task("cleanOutdatedLibraries", function(){
del("./Libs/*");
del(['./myapp.js', './myapp.min.js', './myapp.css'])
});
gulp.task("cleanTemporaryFiles", function(){
del("./output/*");
});
/** Run gulp clean on prebuild */
gulp.task('clean', ["cleanOutdatedLibraries", "cleanTemporaryFiles"])
gulp.task('copyNewestLibraries', function(){
var bowerFiles = ['angular/angular.min.js',
'angular/angular.js',
'angular/angular.min.js.map',
'angular-ui-router/release/angular-ui-router.min.js',
'angular-local-storage/dist/angular-local-storage.min.js',
'jquery/dist/jquery.min.js',
'jquery/dist/jquery.min.map',
'lodash/lodash.min.js',
'angular-resource/angular-resource.min.js',
'angular-resource/angular-resource.min.js.map',
'momentjs/min/moment.min.js',
'angular-loading-bar/src/loading-bar.js',
'ngDialog/js/ngDialog.min.js'];
gulp.src(bowerFiles, {cwd: "./bower_components/"})
.pipe(gulp.dest('./Libs'));
});
gulp.task('copyThirdPartyLibraries', function(){
var thirdPartyFiles = ['jquery-ui.min.js',
'angular-sanitize.min.js'];
gulp.src(thirdPartyFiles, {cwd: "./_thirdparty/"})
.pipe(gulp.dest('./Libs'));
});
/** Merge all Angular JS HTML templates into a cache */
gulp.task('mergeHtmlTemplatesIntoAngularCache', function(){
gulp.src('app/**/*.html')
.pipe(templateCache("templates.js", {
module: "myapp"
}))
.pipe(gulp.dest('./output/'));
});
gulp.task('produceMinfiedApp', function(){
gulp.src(['app/**/*.js', 'output/typescripts.js'])
.pipe(concat('bundle.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('./output/'));
gulp.src(['output/bundle.min.js', 'output/templates.js'])
.pipe(concat('myapp.min.js'))
.pipe(gulp.dest('./'));
});
gulp.task('produceApp', function(){
gulp.src(['app/**/*.js', 'output/typescripts.js'])
.pipe(concat('bundle.js'))
.pipe(ngAnnotate())
.pipe(gulp.dest('./output/'));
gulp.src(['output/bundle.js', 'output/templates.js'])
.pipe(concat('myapp.js'))
.pipe(gulp.dest('./'));
});
gulp.task('mergeStyles', function(){
gulp.src(['Styles/**/*.css'])
.pipe(concat('styles.css'))
.pipe(gulp.dest("./output/"));
gulp.src(['app/**/*.css'])
.pipe(concat('app.css'))
.pipe(gulp.dest("./output/"));
gulp.src(['output/styles.css', 'output/app.css'])
.pipe(concatCss("./myapp.css"))
.pipe(minifyCss({compatibility: 'ie10'}))
.pipe(gulp.dest('./'));
});
/** Run gulp build on post build */
gulp.task('build', ["copyNewestLibraries",
"copyThirdPartyLibraries",
"mergeHtmlTemplatesIntoAngularCache",
"produceMinfiedApp",
"produceApp",
"mergeStyles"]);
/** Run gulp build on post build */
gulp.task('build', ["copyNewestLibraries",
"copyThirdPartyLibraries",
"mergeHtmlTemplatesIntoAngularCache",
"produceMinfiedApp",
"produceApp",
"mergeStyles"]);
These tasks (copyNewestLibraries, produceApp, etc.) run asynchronously, in no particular order. E.g. produceApp may finish before copyNewestLibraries, which is probably not what you want.
See How to run Gulp tasks sequentially one after the other for more info.
I'm using script like this:
run.js:
var gulp = global.gulp = require('gulp');
require('./gulpfile.js');
//interaction
gulp.start('zip');
gulpfile.js:
global.gulp = global.gulp || require('gulp');
gulp.task('zip', function () {});
And start: node run.js
I need it because I need collect some data via inquirer.prompt() before task start.
Everything works, but console freeze cursor after script end(in PHPStorm).
I don't understand why. If I run task via gulp, it's ok.
As mentioned by Aperçu in the comments, try letting gulp know that you're done your task.
Change
gulp.task('zip', function () {});
to
gulp.task('zip', function (done) {done()});