关闭搜索(ESC)
搜索标签:

前端自动化布局一

2015-05-10 浏览:1079 标签: 前端自动化 grunt bower requirejs

描述

前端自动化,顾名思义,就是让前端代码有自动压缩,合并等操作。之前,前端的需求是非常小的,也就是,只需要引入jQuery,然后再在html里引入脚本,这种方式是非常简单使用,实质上说,这种方式,需要额外的工具对css和js压缩,这样的方式最终会导致js增多,路径混乱等问题。

工具

具体方案是bower+grunt+requireJS配置前端架构。在这次项目里,对这样的框架的搭建有了一些的了解,现在总结一下。

bower: bower用来对包管理。

grunt:grunt对js压缩,bower编译,以及sass编辑。

requireJS:requireJS符合amd规范,可以模块化开发。

配置环境

环境基于nodejs后端,eje模板。我们可以在项目下配置bower。

下载bower。执行npm install bower --save,如果在报错,用sudo环境下。

执行bower init,可以配置bower,选择你需要规范。

bower

最后会生成bower.json的配置文件。

bower install jquery --save 可以在项目下生成一个bower_components文件夹,所有的包都在里面。

继续配置grunt。

npm install grunt --save,在项目里新建一个Gruntfile.js

开始配置Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
}

安装sass,sudo npm install grunt-contrib-sass --save

在配置之前,我们要定好文件夹。

在项目里,我会定一个dev文件夹,用来作为开发文件。具体布局如下:

grunt files

dev/css/src文件夹下放置sass文件。

现在配置grunt sass。

        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: [{
                    expand: true,
                    cwd: 'dev/css/src/',
                    src: ['*.scss'],
                    dest: 'css/',
                    ext: '.css'
                }]
            }
        },

然后添加执行命令:

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('sassbuild', ['sass']);

然后配置uglify和bower。和上面差不多,具体配置如下:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: [{
                    expand: true,
                    cwd: 'dev/css/src/',
                    src: ['*.scss'],
                    dest: 'public/stylesheets/',
                    ext: '.css'
                }]
            }
        },
        bower: {
            install: {
                options: {
                    targetDir: 'public/javascripts/lib/',
                    layout: 'byComponent',
                    install: true,
                    verbose: false,
                    cleanTargetDir: false
                }
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>;author: wangbinbin;nickname:done;blog: newblog.tecclass.cn;company:kaixun*/\n'
            },
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'dev/js/business/',
                    src: '**/*.js',
                    dest: 'public/javascripts/business/'
                }, {
                    expand: true,
                    cwd: 'dev/js/init/',
                    src: '*.js',
                    dest: 'public/javascripts/init/'
                }]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-bower-task');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('sassbuild', ['sass']);
    grunt.registerTask('bowerbuild', ['bower']);
    grunt.registerTask('uglifybuild', ['uglify']);
}

执行grunt bowerbuildbower uglifybuild

这样就配置好了grunt环境。

在dev下写sass文件和js文件,public下是可用文件。

总结

可能还有更多可用的自动化方案。也许以上有很多问题,后序会添加更多的方案。

添加评论