grunt开发上什么

项目背景

上什么 我以前的 挖站 移动版

推荐一些可以上的站点而已

技术准备工作

githup

申请一个地址 https://github.com/bigzhu/ssm

grunt

自动化的前端工作: 用grunt进行前端开发自动化

coffeescript

喜欢python的我,必须要用 coffeescript

backbone

骨架还是这个最轻量

Zepto.js

大家都说jquery太重了,那我来玩玩zepto好了.

bootstrap

bootstrap 3.0 还是不错的,够扁平,用在移动端也是ok的

开始

coffeescript调试问题的解决: 调试 coffeescript

压缩啊,合并啊,我暂时不是很感冒,目前还用不到.

coffeescript 的自动编译比较关心,先安装 grunt-contrib-coffee

加入配置

module.exports = function(grunt) {
	grunt.initConfig({
	  coffee: {
            compile: {
                files: {
                    'dest/ssm.js': 'src/*.coffee'
                }
            }
          }
	});
	grunt.loadNpmTasks('grunt-contrib-coffee');
	grunt.registerTask('default', ![pic]('coffee'));
};

比较怪异,目标在前,source在后.

为了不把f5按烂,另一个我最关心的功能就是页面的自动刷新,这多方便啊.

npm install --save-dev grunt-contrib-watch connect-livereload

浏览器插件: Chrome LiveReload

   watch: {
            client: {
                files: ['*.html', 'css/*', 'js/*', 'images/**/*']
                options: {
                    livereload: true
                }
            }
        }
        ......
          // 加载插件
    grunt.loadNpmTasks('grunt-contrib-watch');
 
    // 自定义任务
    grunt.registerTask('live', ![pic]('watch'));
        

完整的配置如下

module.exports = function(grunt) {
	grunt.initConfig({
	  coffee: {
            compile: {
                files: {
                    'js/ssm.js': 'src/*.coffee'
                },
            options: {
                  livereload: true,
                }
            }
          },
      watch: {
                 client: {
                     files: ['*.html', 'css/*', 'js/*', 'images/**/*'],
                     options: {
                         livereload: true
                     }
                 }
             }
	});
	grunt.loadNpmTasks('grunt-contrib-coffee');
	grunt.registerTask('default', ![pic]('coffee'));

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('live', ![pic]('watch'));
    }

要用 http 服务器,本地的支持的有问题.那么自然用python http

grunt live

访问: http://0.0.0.0:8000/

点击 chrome 插件,圆点变成实心,就ok了. grunt 页面自动刷新

下面安装 bootstrap,简单点,直接下载解压了,现在用不到自定义样式.

发现 coffee 不能自动编译,于是又改了下.

module.exports = function(grunt) {
	grunt.initConfig({
	  coffee: {
            compile: {
                files: {
                    'js/ssm.js': 'src/*.coffee'
                }
            }
          },

      watch: {
                coffee:{
                    files: ![pic]('src/*.coffee'),
                    tasks: ![pic]('coffee'),

                },
                 client: {
                     files: ['*.html', 'css/*', 'js/*', 'images/**/*'],
                     options: {
                         livereload: true
                     }
                 }
             }
	});
	grunt.loadNpmTasks('grunt-contrib-coffee');
	grunt.registerTask('default', ![pic]('coffee'));

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('live', ![pic]('watch'));
    }

js 的 cache问题

requirejs的 cache busting 来搞定.

 (new Date()).getTime()

真正的问题是用了 tornado 来做 web server,tornado直接把 static 做了cache,我….. Disable static file caching in Tornado