ljuboja
1/8/2014 - 5:34 PM
Supporting files for a Beginner’s Guide to using Grunt with Magento: http://www.gpmd.co.uk/blog/a-beginner-s-guide-to-using-grunt-with-magen
Supporting files for a Beginner’s Guide to using Grunt with Magento: http://www.gpmd.co.uk/blog/a-beginner-s-guide-to-using-grunt-with-magento/
// This is prototype's equivalent to jQuery's $(document).ready
document.observe('dom:loaded', function() {
console.log("Hello world!");
});{
"name": "my-theme",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-compass": "~0.7.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-imagemin": "~0.4.0",
"grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0"
}
}
mkdir magento-grunt-proj
mkdir public_html/
mkdir -p theme/app/design/frontend/my-theme/default/
mkdir -p theme/skin/frontend/my-theme/default/
cd public_html/skin/frontend/
ln -s ../../../theme/skin/frontend/my-theme my-theme
cd ../../app/design/frontend/
ln -s ../../../../theme/app/design/frontend/my-theme my-theme
n98-magerun.phar cache:clean
n98-magerun.phar cache:disable
touch .gitignore
touch README.md
git init
git add .gitignore README.md public_html/
git commit -m "First commit"
git remote add origin git@github.com:[your-username]/[your-repo].git
git push -u origin master
cp -a public_html/app/design/frontend/default/modern/. theme/app/design/frontend/my-theme/default
cp -a public_html/skin/frontend/default/modern/. theme/skin/frontend/my-theme/default
git add theme/
git commit -m "Added theme files"
git push origin master
npm install -g grunt-cli
npm install
npm install grunt-contrib-compass --save-dev
mkdir -p theme/skin/frontend/my-theme/default/scss
cp -a theme/skin/frontend/my-theme/default/css/. theme/skin/frontend/my-theme/default/scss
cd theme/skin/frontend/my-theme/default/scss
find . -iname "*.css" -exec bash -c 'mv "$0" "${0%\.css}.scss"' {} \;
grunt
npm install grunt-contrib-watch --save-dev
grunt watch
cp -a theme/skin/frontend/my-theme/default/images/. theme/skin/frontend/my-theme/default/images-src/
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-clean --save-dev
git add .gitignore Gruntfile.js package.json theme/skin/frontend/my-theme/default/images-src/ theme/skin/frontend/my-theme/default/scss/
git commit -m "Added some grunt tasks"
git push origin master
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
touch theme/app/design/frontend/my-theme/default/layout/local.xml
# On branch master
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# .sass-cache/
# Gruntfile.js
# node_modules/
# package.json
# theme/skin/frontend/my-theme/default/images-src/
# theme/skin/frontend/my-theme/default/scss/
nothing added to commit but untracked files present (use "git add" to track)<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/scripts.min.js</name>
<params/>
</action>
</reference>
</default>
</layout>A Beginner’s Guide to Using Grunt With Magento
Supporting files for a Beginner’s Guide on using Grunt with Magento
watch: {
compass: {
files: [skinDir + '/scss/{,*/}*.scss'],
tasks: ['compass']
}
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
skinDir + 'scss/{,*/}*.scss'
],
tasks: ['compass']
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: skinDir + 'images-src/',
src: '**/*.{png,jpg,gif}',
dest: skinDir + 'images/'
}]
}
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
skinDir + 'scss/{,*/}*.scss',
skinDir + 'images-src/{,*/}*.{png,jpg,gif}'
],
tasks: [
'compass',
'imagemin'
]
}
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
skinDir + 'scss/{,*/}*.scss',
skinDir + 'images-src/{,*/}*.{png,jpg,gif}'
],
tasks: [
'compass',
'clean:images',
'imagemin'
]
}
},
jshint: {
all: [
'Gruntfile.js',
skinDir + 'js/{,*/}*.js'
]
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
skinDir + 'scss/{,*/}*.scss',
skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
skinDir + 'js/{,*/}*.js'
],
tasks: [
'compass',
'clean:images',
'imagemin',
'jshint'
]
}
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
skinDir + 'scss/{,*/}*.scss',
skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
[skinDir + 'js/*.js', '!' + skinDir + 'js/*.min.js']
],
tasks: [
'compass',
'jshint',
'uglify',
'imagemin'
]
}
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
appDir + '**/*.xml',
skinDir + 'scss/{,*/}*.scss',
skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
[skinDir + 'js/*.js', '!' + skinDir + 'js/*.min.js']
],
tasks: [
'compass',
'clean:images',
'imagemin',
'jshint',
'uglify'
]
}
},module.exports = function(grunt) {
var skinDir = 'theme/skin/frontend/my-theme/default/';
var appDir = 'theme/app/design/frontend/my-theme/default/';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
sassDir: skinDir + 'scss',
cssDir: skinDir + 'css',
environment: 'development',
outputStyle: 'nested'
}
}
},
clean: {
images: {
src: [skinDir + 'images']
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: skinDir + 'images-src/',
src: '**/*.{png,jpg,gif}',
dest: skinDir + 'images/'
}]
}
},
jshint: {
all: [
'Gruntfile.js',
skinDir + ['js/{,*/}*.js', '!js/{,*/}*.min.js']
]
},
uglify: {
dist: {
options: {
mangle: false
},
files: {
'theme/skin/frontend/my-theme/default/js/scripts.min.js': [skinDir + 'js/scripts.js']
}
}
},
watch: {
options: {
livereload: true
},
livereload: {
files: [
appDir + '**/*.{phtml,xml}',
skinDir + 'scss/{,*/}*.scss',
skinDir + 'images-src/{,*/}*.{png,jpg,gif}',
[skinDir + 'js/*.js', '!' + skinDir + 'js/*.min.js']
],
tasks: [
'compass',
'clean:images',
'imagemin',
'jshint',
'uglify'
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'compass',
'clean:images',
'imagemin',
'jshint',
'uglify'
]);
};
.idea/
.project
*.sublime-project
*.sublime-workspace
*.tmproj
*.bak
*.swp
*~.nib
.sass-cache/
node_modules/
public_html/app/design/install/
public_html/app/etc/local.xml
public_html/app/etc/local.xml.additional
public_html/app/etc/local.xml.template
public_html/cron.php
public_html/cron.sh
public_html/downloader/
public_html/errors/
public_html/includes/
public_html/index.php
public_html/index.php.sample
public_html/install.php
public_html/LICENSE*
public_html/lib/Zend/
public_html/media/
public_html/var/
public_html/.htaccess
public_html/.htaccess.dist
public_html/.htaccess.sample
public_html/api.php
public_html/favicon.ico
public_html/get.php
public_html/js/
public_html/lib/
public_html/mage
public_html/shell/
public_html/pear/
public_html/php.ini.sample
public_html/pkginfo/
public_html/RELEASE_NOTES.txt
public_html/app/.htaccess
public_html/app/Mage.php
public_html/app/code/
public_html/app/design/adminhtml/
public_html/app/design/frontend/base/
public_html/app/design/frontend/default/
public_html/app/etc/
public_html/app/locale/
public_html/skin/adminhtml/
public_html/skin/frontend/base/
public_html/skin/frontend/default/
public_html/skin/install/