Given this gulpfile.js:
var gulp = require("gulp"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
autoprefixer = require("gulp-autoprefixer"),
input = "./sass/*.scss",
output = "./assets/style.css";
gulp.task("sass", function() {
return gulp
.src(sassInput)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(output))
.resume();
});
gulp.task("watch", function() {
return (gulp
//watch input folder for change and then run 'sass' task
.watch(input, ["sass"])
.on("change", function(e) {
console.log(
"file" + e.path + " was " + e.type + ", running tasks..."
);
}) );
});
I'm getting the following error --
Error: EEXIST: file already exists, mkdir './assets/style.css'
From what I've found around the web, it seems like gulp is treating the 'style.css' portion of that output folder as a directory itself, or something weird like that, but I can't really figure it out.
There is a tool called gulp-rename built specifically for this purpose. Here's the snippet that I added to make it work properly after adding the npm package.
var gulp = require("gulp");
.
.
.
var rename = require("gulp-rename")
input = "./sass/*.scss",
output = "./assets/";
gulp.task("sass", function() {
return gulp
.src(sassInput)
.
.
.
.pipe(rename("styles.css.liquid"))
.resume();
});
Related
I have a wordpress installation and creating a theme based on a lynda.com tutorial (WordPress: Building Themes from Scratch Using Underscores).
I installed gulp and all the needed stuff to work with scss but the problem is sometimes, changes don't save!
http://prntscr.com/o60i1a
the file is changed and watch is starting but the scss file is not updating.
The problem is sometimes it works when I close cmd or browser!
I read in another question here that you need to add this to sublime:
"atomic_save" : true
I did it, and it worked so changes are now saving okay (I was happy) but this mourning it's not saving again : (
Gulpfile.js:
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'localhost/wp',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
I have a set of 5 CSS files currently produced as compressed by my Gulp file.
I need to change my setup so that 1 of the files compiles in compact mode with comments instead. I don't want to apply this with all of my files else they get too big.
Can anyone help?
Here's my gulp file...
var gulp = require("gulp"),
del = require("del"),
concat = require("gulp-concat"),
rename = require("gulp-rename"),
compass = require("gulp-compass"),
uglify = require("gulp-uglify");
var files = {
js: "ministryweb.js",
minJs: "ministryweb.min.js",
compassConfig: "config-release.rb",
compassConfigDbg: "config-debug.rb",
compassConfigText: "config-text.rb"
}
var paths = {
webroot: "./"
};
paths.css = paths.webroot + "css/";
paths.scripts = paths.webroot + "Scripts/";
paths.scss = paths.css + "scss/";
paths.src = paths.scripts + "src/";
paths.bundleJs = paths.scripts + files.js;
paths.minJs = paths.scripts + files.minJs;
paths.compiledCss = paths.css + "*.css";
paths.sourceScss = paths.scss + "*.scss";
paths.compassConfig = paths.css + files.compassConfig;
paths.compassConfigDbg = paths.css + files.compassConfigDbg;
paths.compassConfigText = paths.css + files.compassConfigText;
var runCompass = function (cfgPath) {
return gulp.src(paths.sourceScss)
.pipe(compass({
config_file: cfgPath,
css: paths.css,
sass: paths.scss
}))
.pipe(gulp.dest(paths.css));
};
gulp.task('clean:js', function (cb) {
del([
paths.bundleJs,
paths.minJs
], cb);
});
gulp.task("clean:css", function (cb) {
del(paths.compiledCss, cb);
});
gulp.task("bundle:js", ["clean:js"], function () {
return gulp.src([
paths.src + "global.js",
paths.src + "ministry.js",
paths.src + "ministry.menu.js",
paths.src + "ministry.blog.js",
paths.src + "disqus-loader.js",
paths.src + "twitter-loader.js"])
.pipe(concat(files.js))
.pipe(gulp.dest(paths.scripts));
});
gulp.task("min:js", ["bundle:js"], function () {
var ret = gulp.src(paths.bundleJs)
.pipe(rename(files.minJs))
.pipe(uglify())
.pipe(gulp.dest(paths.scripts));
del(paths.bundleJs);
return ret;
});
gulp.task("compass", ["clean:css"], function () {
return runCompass(paths.compassConfig);
});
gulp.task("compass-debug", ["clean:css"], function () {
return runCompass(paths.compassConfigDbg);
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task("build-debug", ["bundle:js", "compass-debug"]);
gulp.task("build", ["min:js", "compass"]);
And my config.rb, for my live deploy...
# Require any additional compass plugins here.
#Folder settings
relative_assets = true #because we're not working from the root
css_dir = "../css" #where the CSS will saved
sass_dir = "../css/scss" #where our .scss files are
images_dir = "../images" #the folder with your images
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded # After dev :compressed
output_style = :compressed
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# Obviously
preferred_syntax = :scss
I've tried running a second run on compass on just the single file (text-styles.scss) to compile differently but I can't seem to run compass on just a single file which seems crazy.
I found a solution for this within this article...
Keeping Sass Folder Structure with Gulp/Compass
I managed to get a specific file working by using the initial gulp.src as follows...
gulp.task('compass-text-styles', function () {
return gulp.src(paths.scss + "text-styles.scss")
.pipe(compass({
config_file: paths.compassConfigText,
css: paths.css,
sass: paths.scss
}))
.pipe(gulp.dest(paths.css));
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task("build-debug", ["bundle:js", "compass-debug"]);
gulp.task("build", ["min:js", "compass-text-styles", "compass"]);
My mistake in prior attempts was trying to apply the file name to the sass compass parameter.
I installed ionic and cordova.
I created the ionic project
ionic start myapp blank
I added gulp-tsc on my project
npm install gulp-tsc
I edited gulpfile.js at the root of the ionic project :
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var typescript = require('gulp-tsc');
var paths = {
sass: ['./scss/**/*.scss']
typescript: ['./www/scripts/**/*.ts']
};
gulp.task('default', ['sass', 'compile']);
function compileTypeScript(done) {
gulp.src(paths.typescript)
.pipe(typescript({ sourcemap: true, out: 'tslib.js', sourceRoot: '../scripts' }))
.pipe(gulp.dest('./www/js/'))
.on('end', done);
}
gulp.task('compile', compileTypeScript);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
compileTypeScript();
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.typescript, ['compile']);
});
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();
});
I added a simple ts file on www/scripts folder (a class), and when I run ionic serve, tslib.js is not generated. I don't have any error.
What I missed to do to generate the js file from ts files ?
Thanks.
You may try this example:https://github.com/anchann/angularjs-typescript-e2e.
You have to have a separate grunt task running that watches your .ts files and compiles them into the tslib.js.
Some times the dependency does not install in the same, what happens, when you install ionic then typescript automatically install as a dependency,
I suggest you run this command to install manually typescript dependency.
sudo npm install -g typescript
My goal is to watch all my scss files
with the code below all it's ok if my
config.paths.src.styles is set like
/styles/app.scss
but when I change it to
/styles/*.scss
I've got like
Error: _theme.scss:13:20: Missing property value
The problem come out when
I use #extend .container;
not normal css.
Gulp task
style.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');
var csso = require('gulp-csso');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
var sassOptions = { // The options to be passed to sass()
style: 'expanded',
'sourcemap=none': true
};
//https://github.com/jgoux/generator-angulpify/issues/19
module.exports = gulp.task('styles', function () {
return gulp.src(config.paths.src.styles)
.pipe(autoprefixer('last 1 version'))
.pipe(gulpif(release, csso()))
.pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
.pipe(rename(config.filenames.styles))
.pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
.pipe(gulpif(!release,reload({stream:true})));
});
watch.js
'use strict';
var gulp = require('gulp');
module.exports = gulp.task('watch', function() {
var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
stylesWatcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
});
});
app.scss
#import "variables";
#import "imports";
#import "theme";
_theme.js
.morra-sub-header{
#include clearfix;
#extend .container;
}
You can give a look at the whole gulp set up
https://github.com/whisher/angular-bootstrap-cordova-seed/tree/master/gulp
END UP
You should use app.scss in the style task
and *.scss in the watch task (silly me :) )
mainStyles: SRC_FOLDER + '/styles/app.scss',
styles: SRC_FOLDER + '/styles/*.scss',
module.exports = gulp.task('styles', function () {
return gulp.src(config.paths.src.mainStyles)
.pipe(autoprefixer('last 1 version'))
.pipe(gulpif(release, csso()))
.pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
.pipe(rename(config.filenames.styles))
.pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
.pipe(gulpif(!release,reload({stream:true})));
});
module.exports = gulp.task('watch', function() {
var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
stylesWatcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
});
});
The issue here is that your *.scss glob takes everything with no special order. So the _theme.scss file could be picked first, and because it's using variables from the _imports.scss one that's not processed yet, you've got the error.
To prevent this, you could use an array specific pattern to specifically load _imports.scss first.
config.paths.src.styles = [
'_imports.scss',
'*.scss'
];
Even though I don't know why you want to also pipe your partials, the imports from the app.scss should be good.
I'm having a strange problem with Gulp. Here is my Gulp file:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.run('main');
gulp.watch('sass/*.scss', function() {
gulp.run('main');
})
});
gulp.task('main', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
// .pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}))
;
});
The script runs correctly the first time. But on second and subsequent runs of the same script (without Gulp having stopped running), it puts it in the SASS directory as a subitem of the .SCSS file. Any idea why this is happening. I'm not sure how to even debug.
Try the following code.
It uses the correct syntax for gulp, replacing gulp.run() with the supported function arguments.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('main', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}));
});
gulp.watch('sass/*.scss', ['main']);
gulp.task('default', ['main']);
Found the answer, the gulp.dest keeps the folder structure of gulp.src, to override you can set the base property of the src, this will exclude whatever folder the base is set to
example gulp.src('./sass/' + '**/*.scss', {base: 'sass'}) this now excludes sass from the destination, no longer appending sass to your gulp.dest
See and this look at gulp.src