Grunt安装及配合组件构建前端开发一体化

Grunt

Grunt的高度集成化开发环境,释放了前端开发中大量时间,如css压缩、js压缩、错误检查、合并js、压缩图片、压缩html、模块构造等,只要你能想到的基本都可以通过Grunt插件去实现。

安装环境

1、Grunt 0.4.x要求Node.js的版本>=0.8.0,node -v 查看你的版本。
2、sass 3.6.4,sass -v 查看你sass的版本,新版本才会有sourcemap,chrome中合并的css通过sourcemap找到sass中对应行。

全局安装CLI

npm install -g grunt-cli

这条命令将会把grunt命令植入到你的系统路径中,这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

注意,安装grunt-cli并不等于安装了grunt任务运行器!Grunt CLI的工作很简单:在Gruntfile所在目录调用运行已经安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

本人网站目录结构

grunt

文件 说明
.build js模块化构建缓存,使用grunt-cmd-transport会生成这个文件夹
.sass-cache sass生成缓存文件,使用grunt-contrib-sass会生成这个文件夹
app 主要放静态文件,你也可以命名成html
dist 主要放生成好的css、js、modules和图片images
node_modules 这个是文件夹安装的就是当前项目需要的grunt和grunt相关插件
psd 文件夹就是psd源文件,设计稿原始文件,其中包含source(原始文件)和knife(切图文件)
src 项目中未合并的js、sass文件,我们大部分的操作在这个里边写样式和js。
zip 项目打包文件,页面制作完了给程序需要打包命名会根据配置项目名+时间戳(月+日+时+秒),如dbpoo_10101224.zip
Gruntfile.js 关键文件所有的Grunt配置都在要在这个文件中实现。
package.js 关键文件配置项目一些常用信息如项目名、项目描述等,最关键的就是所有项目中需要的所有grunt相关插件都要在这个里边指定。

package.js配置

今天把所有的版本都更新到当前最新的版本,插件有版本号配置,你可以搜索最新改一下后边的版本号,安装的时候就可以安装最新的了。
如果你更新了版本号,建议把node_modules文件夹清空。

{
"name": "dbpoo",
"version": "0.1.0",
"description": "grunt project",
"author": "dbpoo",
"homepage": "http://www.dbpoo.com",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-sass": "~0.8.1",
"grunt-contrib-compress": "^0.12.0",
"grunt-cmd-transport": "~0.4.1",
"grunt-contrib-clean": "~0.6.0"
}
}

Gruntfile.js配置

module.exports = function(grunt) {

"use strict";


var fs = require('fs'), pkginfo = grunt.file.readJSON('package.json');

// Project configuration.
grunt.initConfig({
pkg: pkginfo,
banner: '/*! <%= pkg.name %> <%= pkg.version %> | <%= grunt.template.today("yyyy-mm-dd HH:MM") %> | (c) 2014 DBPOO | MIT License */ ',

// sass生成css
sass: {
dist: {
options: {
style: 'nested'
},
files: {
'dist/css/uianhei.css' : 'src/sass/uianhei.scss'
}
},
distmin: {
options: {
banner: '<%= banner %>',
style: 'compressed',
sourcemap: true
},
files: {
'dist/css/uianhei.min.css' : 'src/sass/uianhei.scss'
}
}
},

transport: {
options: {
paths: ['.'],
debug: false
},
dist: {
options: {
idleading: 'js/'
},
files: [
{
expand: true,
cwd: 'src/js',
src: '**/*.js',
dest: '.build/js'
}
]
},
jquery: {
options: {
idleading: 'modules/jquery/'
},
files: [
{
expand: true,
cwd: 'src/modules/jquery',
src: '**/*.js',
dest: '.build/modules/jquery'
}
]
},
device: {
options: {
idleading: 'modules/device/'
},
files: [
{
expand: true,
cwd: 'src/modules/device',
src: '**/*.js',
dest: '.build/modules/device'
}
]
}
},

concat: {
options: {
include: 'self'
},
dist: {
files: {
'dist/js/main.js': ['.build/js/*.js'],
'dist/modules/jquery/jquery.js': ['.build/modules/jquery/jquery.js'],
'dist/modules/device/device.js': ['.build/modules/device/device.js'],
'dist/modules/jquery/jquery.carousel.js': ['.build/modules/jquery/jquery.carousel.js'],
'dist/modules/jquery/jquery.lightbox.js': ['.build/modules/jquery/jquery.lightbox.js']
}
}
},

uglify: {
dist : {
options: {
banner: '<%= banner %>\n'
},
files: {
'dist/js/main.js' : ['dist/js/main.js']
}
},
jquery : {
options: {
banner: '<%= banner %>\n'
},
files: {
'dist/modules/jquery/jquery.js' : ['dist/modules/jquery/jquery.js']
}
},
device : {
options: {
banner: '<%= banner %>\n'
},
files: {
'dist/modules/device/device.js' : ['dist/modules/device/device.js']
}
},
carousel : {
options: {
banner: '<%= banner %>\n'
},
files: {
'dist/modules/jquery/jquery.carousel.js' : ['dist/modules/jquery/jquery.carousel.js']
}
},
lightbox : {
options: {
banner: '<%= banner %>\n'
},
files: {
'dist/modules/jquery/jquery.lightbox.js' : ['dist/modules/jquery/jquery.lightbox.js']
}
}
},

compress: {
dist: {
options: {
archive: ( 'zip/' + pkginfo.name + '_' + grunt.template.today("mmddHHMM") + '.zip')
},
files: [
{ expand: true, src: ['app/*', 'dist/**'], dest: ''}
]
}
},

clean: {
build:['.build/js/*','.build/modules/*']
},

watch: {
sass: {
files: ['src/sass/**/*.scss'],
tasks: ['sass'],
options: {
livereload: true,
}
},
js: {
files: ['src/js/**/*.js','src/modules/jquery/*.js','src/modules/device/*.js'],
tasks: ['transport','concat','uglify'],
options: {
livereload: true,
}
},
html: {
files: ['app/*.html'],
options: {
livereload: true,
}
}
}

});

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-watch');

// Default task(s).
grunt.registerTask('js', ['transport','concat','uglify']);
grunt.registerTask('build', ['sass','js']);
grunt.registerTask('zip', ['compress']);
grunt.registerTask('default', ['clean','build','watch']);

};

安装插件及执行grunt监控

grunt02
1、首先进入到你的项目文件夹 如cd www/dbpoo
2、执行npm install,会自动生成node_modules这个文件夹,安装grunt和grunt插件。所以你把项目交接给另外一位同事就不需要连node_modules也打包了。只需要把配置文件package.js和Grunt.js打包即可。
3、根据配置执行相关时间,我的配置
命令:grunt
1)执行清空
2)sass生成css
3)js合并
4)监控文件夹配合LiveReload实现修改html、js、css即时刷新页面,看到效果。

命令:grunt zip
打包app和dist文件夹生成压缩文件

相关配置

// Default task(s).
grunt.registerTask('js', ['transport','concat','uglify']);
grunt.registerTask('build', ['sass','js']);
grunt.registerTask('zip', ['compress']);
grunt.registerTask('default', ['clean','build','watch']);

实例

过一阵子会把最新项目打包github,其中项目中用到的功能都已经封包,如标签切换、返回顶部、分享接口、移动端判断跳转、轮播、点击大图,做一个官网基本需要的功能都有了。