Commit 4e2c5a1b authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] remove compass; update BrowserSync; remove Livereload

parent 634cb7a1
......@@ -52,7 +52,7 @@ module.exports = yeoman.generators.Base.extend((function() {
{
type: 'list',
name: 'projectType',
message: 'What kind of project do you want me to build?',
message: 'What do you want me to build a frontend setup for?',
choices: [
{
value: 'extbaseExtension',
......@@ -71,7 +71,7 @@ module.exports = yeoman.generators.Base.extend((function() {
{
type: 'input',
name: 'projectName',
message: 'Please enter the name for your project',
message: 'Please enter the name of your project/extension',
default: process.cwd().split(path.sep).pop()
}
], function(_answers) {
......@@ -174,21 +174,6 @@ module.exports = yeoman.generators.Base.extend((function() {
message: 'Please provide the configuration strings for autoprefixer',
default: '\'last 1 version\', \'> 1%\', \'ie 8\''
},
{
type: 'list',
name: 'livereloadMethod',
message: 'Which method do you want to use for live reloading?',
choices: [
{
name: 'Livereload',
value: 'livereload'
},
{
name: 'BrowserSync',
value: 'browserSync'
}
]
},
{
type: 'confirm',
name: 'bower',
......@@ -200,6 +185,20 @@ module.exports = yeoman.generators.Base.extend((function() {
done();
});
}
},
browserSyncPrompts: function() {
if (answers.projectType === 'typo3Frontend') {
var done = this.async();
this.prompt({
type: 'input',
name: 'devUrl',
message: 'Please specify the URL where your TYPO3 site will be reachable during development',
default: answers.projectName + '.dev'
}, function(_answers) {
answers = _.extend(answers, _answers);
done();
});
}
}
};
......@@ -233,13 +232,11 @@ module.exports = yeoman.generators.Base.extend((function() {
this.destinationPath('gulp/css.js'),
answers
);
if (answers.livereloadMethod === 'browserSync') {
this.fs.copyTpl(
this.templatePath('gulp/browser-sync.js'),
this.destinationPath('gulp/browser-sync.js'),
answers
);
}
this.fs.copyTpl(
this.templatePath('gulp/browser-sync.js'),
this.destinationPath('gulp/browser-sync.js'),
answers
);
this.fs.copyTpl(
this.templatePath('gulp/images.js'),
this.destinationPath('gulp/images.js'),
......@@ -250,6 +247,11 @@ module.exports = yeoman.generators.Base.extend((function() {
this.destinationPath('gulp/javascript.js'),
answers
);
this.fs.copy(
this.templatePath('gulp/sprite-scss-template.mustache'),
this.destinationPath('gulp/sprite-scss-template.mustache'),
answers
);
}
};
......
'use strict';
var gulp = require('gulp'),
settings = require('./gulp/settings')<% if (livereloadMethod === 'livereload') { %>,
livereload = require('gulp-livereload')<% } %>;
settings = require('./gulp/settings'),
gutil = require('gulp-util');
require('require-dir')('./gulp');
gulp.task('watch', function() {<% if (livereloadMethod === 'livereload') { %>
livereload.listen();<% } else if (livereloadMethod === 'browserSync') { %>
gulp.start('browser-sync');
gulp.task('watch', function() {
<% if (projectType == 'typo3Frontend') { %>
gulp.watch('typo3conf/ext/**/*.scss').on('change', function(file) {
settings.setExtension(getExtensionName(file));
gulp.start('css');
});
gulp.watch(['typo3conf/ext/**/*.js', '!' + 'typo3conf/ext/**/*.min.js']).on('change', function(file) {
settings.setExtension(getExtensionName(file));
gulp.start('javascript');
});
<% } else { %>
gulp.watch(settings.path().sass + '/**/*.scss', ['css']);
gulp.watch([settings.path().javascript + '/**/*.js', '!' + settings.path().javascript + '/**/*.min.js'], ['javascript']);
<% } %>
gulp.watch(settings.path.sass + '/**/*.scss', ['css'])<% if (livereloadMethod === 'livereload') { %>.on('change', function(file) {
livereload.changed(file.path);
})<% } %>;
gulp.watch([settings.path.javascript + '/**/*.js', '!' + settings.path.javascript + '/**/*.min.js'], ['javascript'])<% if (livereloadMethod === 'livereload') { %>.on('change', function(file) {
livereload.changed(file.path);
})<% } %>;
});
gulp.task('default', function() {
gulp.start('css', 'javascript', 'watch');
<% if (projectType == 'typo3Frontend') { %>
settings.setExtension('');
<% } %>
gulp.start('browser-sync', 'watch');
});
<% if (projectType == 'typo3Frontend') { %>
function getExtensionName(changedFile) {
var ext = changedFile.path.split('ext/')[1].split('/')[0];
gutil.log('Change in extension [' + ext + ']');
return ext;
}
<% } %>
......@@ -20,7 +20,7 @@
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="<%= javascriptPath %>/main.min.js"></script>
<script src="<%= javascriptPath %>/main<% if (jsuglify) { %>.min<% } %>.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
......
......@@ -4,12 +4,11 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {<% if (livereloadMethod === 'browserSync') { %>
"browser-sync": "^1.8.2",<% } else if (livereloadMethod === 'livereload') { %>
"gulp-livereload": "^3.2.0",<% } %>
"devDependencies": {
"browser-sync": "^2.0.1",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-css-image-dimensions": "^1.0.1",
"gulp-css-image-dimensions": "^1.0.1",
"gulp-sass": "^1.3.1",
"gulp-cssimport": "^1.3.1",<% if (minifyCss) { %>
"gulp-minify-css": "^0.3.11",<% } %>
......@@ -21,8 +20,16 @@
"browserify": "^8.1.0",<% } else if (jsconcat) { %>
"gulp-concat": "^2.4.3",<% } %><% if (jsuglify) { %>
"gulp-uglify": "^1.0.2",<% } %>
"gulp-hash": "^2.0.3",
"gulp-hash-references": "^1.0.2",
"gulp-if": "^1.2.5",
"gulp-tap": "^0.1.3",
"require-dir": "^0.1.0",
"gulp-util": "^3.0.3",
"gulp-sourcemaps": "^1.3.0",
"yargs": "^1.3.3",
"del": "^1.1.1",
"css-sprite": "^0.9.3",
"chalk": "^0.5.0"
}
}
......
'use strict';
var gulp = require('gulp'),
settings = require('./settings'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
browserSync({<% if (projectType == 'standalone') { %>
server: {
baseDir: '.'
}
}<% } else { %>
proxy: '<%= devUrl %>'
<% } %>
});
});
......@@ -5,35 +5,56 @@ var gulp = require('gulp'),
sass = require('gulp-sass'),
cssImageDimensions = require('gulp-css-image-dimensions'),
cssImport = require('gulp-cssimport'),
autoprefixer = require('gulp-autoprefixer')<% if (minifyCss) { %>,
minifyCss = require('gulp-minify-css')<% } %><% if (livereloadMethod === 'browserSync') { %>,
browserSync = require('browser-sync')<% } %>;
gulpif = require('gulp-if'),
sprite = require('css-sprite').stream,
imagemin = require('gulp-imagemin'),
tap = require('gulp-tap'),
del = require('del'),
hash = require('gulp-hash'),
path = require('path'),
sourcemaps = require('gulp-sourcemaps'),
references = require('gulp-hash-references'),
autoprefixer = require('gulp-autoprefixer'),<% if (minifyCss) { %>
minifyCss = require('gulp-minify-css'),<% } %>
browserSync = require('browser-sync');
// compile sass to css
gulp.task('css', function() {
gulp.task('css', ['hash-sprites'], function() {
return gulp.src(settings.path().sass + '/**/*.scss')
.pipe(cssImageDimensions('../images'))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(cssImport())
.pipe(autoprefixer(<%= autoprefixerBrowserSelection %>))<% if (minifyCss) { %>
.pipe(minifyCss())<% } %>
.pipe(gulp.dest(settings.path().css))<% if (livereloadMethod === 'browserSync') { %>
.pipe(browserSync.reload({stream: true}))<% } %>;
.pipe(sourcemaps.write())
.pipe(gulp.dest(settings.path().css))
.pipe(browserSync.reload({stream: true}));
});
// create spritesheet
gulp.task('sprites', function() {
return gulp.src(path.join(settings.path(), '/images/sprites') + '/*.png')
.pipe(tap(function() {
del([path.join(settings.path(), 'images/') + 'sprites-*.png']);
}))
return gulp.src(path.join(settings.path().images, '/sprites') + '/**/*')
.pipe(sprite({
name: 'sprites',
style: '_sprite.scss',
cssPath: '../images',
template: 'gulp/sprite-scss-template.mustache',
orientation: 'binary-tree',
hash: true
orientation: 'binary-tree'
}))
.pipe(imagemin())
.pipe(gulpif('*.png', gulp.dest(path.join(settings.path(), 'images')), gulp.dest(path.join(settings.path(), 'sass'))));
.pipe(gulpif('*.png', gulp.dest(settings.path().images), gulp.dest(settings.path().sass)));
});
// cache-busting
gulp.task('hash-sprites', ['sprites'], function() {
return gulp.src(settings.path().images + '/sprites.png')
.pipe(hash())
.pipe(gulp.dest(settings.path().images))
.pipe(hash.manifest('manifest.json'))
.pipe(references(gulp.src(settings.path().sass + '/_sprite.scss')))
.pipe(gulp.dest(settings.path().sass))
.pipe(tap(function() {
del(settings.path().images + '/sprites.png');
}));
});
......@@ -5,10 +5,10 @@ var gulp = require('gulp'),
jshint = require('gulp-jshint'),<% if (browserify) { %>
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
source = require('vinyl-source-stream')<% } else if(jsconcat) { %>
concat = require('gulp-concat')<% } %><% if (jsuglify) { %>,
uglify = require('gulp-uglify')<% } %><% if (livereloadMethod === 'browserSync') { %>,
browserSync = require('browser-sync')<% } %>;
source = require('vinyl-source-stream'),<% } else if(jsconcat) { %>
concat = require('gulp-concat'),<% } %><% if (jsuglify) { %>
uglify = require('gulp-uglify'),<% } %>
browserSync = require('browser-sync');
gulp.task('jshint', function() {
return gulp.src([settings.path().javascript + '/**/*.js', '!' + settings.path().javascript + '/**/*.min.js'])
......@@ -33,6 +33,6 @@ gulp.task('javascript', function() {
.pipe(jshint.reporter('jshint-stylish'))<% if (jsconcat) { %>
.pipe(concat(<% if (jsuglify) { %>'main.min.js'<% } else { %>'main.js'<% } %>))<% } %><% if (jsuglify) { %>
.pipe(uglify())<% } %>
.pipe(gulp.dest('./' + settings.path().javascript + '/'))<% } %><% if (livereloadMethod === 'browserSync') { %>
.pipe(browserSync.reload({stream: true}))<% } %>;
.pipe(gulp.dest('./' + settings.path().javascript + '/'))<% } %>
.pipe(browserSync.reload({stream: true}));
});
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@function sprite-width($sprite) {
@return nth($sprite, 3);
}
@function sprite-height($sprite) {
@return nth($sprite, 4);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite($sprite) {
@include sprite-position($sprite);
background-repeat: no-repeat;
@include sprite-width($sprite);
@include sprite-height($sprite);
background-image: url('{{{sprite.escaped_image}}}');
}
{{#retina}}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
{{class}} {
background-image: url('{{{escaped_image}}}');
background-size: {{px.total_width}} {{px.total_height}};
}
}
{{/retina}}
/*global describe, beforeEach, it */
'use strict';
var path = require('path'),
assert = assert = require('yeoman-generator').assert,
helpers = require('yeoman-generator').test,
os = require('os'),
fs = require('fs');
describe('sgalinski generator:standalone:sass', function() {
before(function(done) {
helpers.run(path.join(__dirname, '../app'))
.inDir(path.join(os.tmpdir(), './temp-test'))
.withOptions({ 'skip-install': true })
.withPrompt({
projectType: 'standalone',
projectName: 'test',
cssPath: 'css',
sassPath: 'sass',
javascriptPath: 'js',
compassConfigPath: '.',
imagesPath: 'imgs',
autoprefixerBrowserSelection: '\'last 1 version\'',
compass: false
})
.on('end', done);
});
it('does not create config.rb', function() {
assert.noFile([
'config.rb'
]);
});
it('does require gulp-sass', function() {
assert.fileContent('package.json', '"gulp-sass":');
});
it('does create the correct gulp task', function() {
assert.fileContent('gulp/css.js', '.pipe(sass())');
assert.noFileContent('gulp/css.js', 'compass');
});
it('does exclude compassConfigPath from settings', function() {
assert.noFileContent('gulp/settings.js', 'compassConfig');
});
});
describe('sgalinski generator:extbaseExtension:sass', function() {
before(function(done) {
helpers.run(path.join(__dirname, '../app'))
.inDir(path.join(os.tmpdir(), './temp-test'))
.withOptions({ 'skip-install': true })
.withPrompt({
projectType: 'extbaseExtension',
projectName: 'test',
cssPath: 'css',
sassPath: 'sass',
javascriptPath: 'js',
compassConfigPath: '.',
imagesPath: 'imgs',
autoprefixerBrowserSelection: '\'last 1 version\'',
compass: false
})
.on('end', done);
});
it('does not create config.rb', function() {
assert.noFile([
'config.rb'
]);
});
it('does exclude compassConfigPath from settings', function() {
assert.noFileContent('asset-paths.json', 'compassConfig');
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment