工作记录–Grunt前端自动化2015.10.28

工作记录–Grunt前端自动化2015.10.28

吴阳 No Comment
工作记录 工具

目录结构

前端文件夹结构如图所示。

多个项目在一起,通过grunt可以检查合并压缩文件。达到快速整合的目的。

单个项目通过watch功能实时调试。能达到事半功倍的效果。

使用less进行前端工作,这里主要针对bootstrap,运用grunt达到一个编译实时预览的效果。

这里还需要livereload功能,公司网速太差,还未

'ues strict';
module.exports = function(grunt) {
 require('load-grunt-tasks')(grunt);
 require('time-grunt')(grunt);
 //任务配置
 grunt.initConfig({
 //config:config;
 pkg: grunt.file.readJSON('package.json'),
 concat:{
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 },
 distJs:{//合并JS
 src: [
 'app/admin/js/*.js',
 'app/bootstrap/js/*.js',
 'app/reg/js/*.js',
 'app/shop/js/*.js'
 ],
 dest: 'app/js/<%= pkg.name %>.js'
 },
 distCss:{//合并CSS
 src: [
 'app/admin/css/*.css',
 'app/bootstrap/css/*.css',
 'app/reg/css/*.css',
 'app/shop/css/*.css'
 ],
 dest: 'app/css/<%= pkg.name %>.css'
 }
 },
 jshint: {//JS检查
 beforeconcat: [
 'app/admin/js/*.js',
 'app/bootstrap/js/*.js',
 'app/reg/js/*.js',
 'app/shop/js/*.js'
 ],
 afterconcat: ['app/js/<%= pkg.name %>.js']
 },
 htmlhint: {//html检查
 allhtml: {
 src: ['app/**/*.html','app/*.html']
 }
 },
 uglify: {//压缩JS
 options: {
 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 },
 build: {
 src: 'app/js/<%= pkg.name %>.js',
 dest: 'app/js/<%= pkg.name %>.min.js'
 }
 },
 less: {
 development: {
 files: {
 "app/css/bootstrap.css": "less/bootstrap.less"
 }
 }
 },
 csslint:{//检查css
 strict: {
 options: {
 import: 2
 },
 src: [
 'app/admin/css/*.css',
 'app/bootstrap/css/*.css',
 'app/reg/css/*.css',
 'app/shop/css/*.css'
 ]
 },
 strictmin:{
 options: {
 import: 2
 },
 src: ['app/css/<%= pkg.name %>.min.css']
 }
 },
 cssmin: {//压缩CSS
 options: {
 shorthandCompacting: false,
 roundingPrecision: -1
 },
 build: {
 files: {
 'app/css/<%= pkg.name %>.min.css': [
 'app/admin/css/*.css',
 'app/bootstrap/css/*.css',
 'app/reg/css/*.css',
 'app/shop/css/*.css'
 ],
 'app/css/bootstrap.min.css': ['app/css/bootstrap.css']
 }
 }
 },
 watch: {//监视文件变化
 less: {
 files: ['less/*.less'],
 tasks: ['less'],
 },
 livereload: {
 options: { livereload: true },
 files: ['app/**/css/*.css','app/**/js/*.js','app/css/*.css','app/js/*.js','app/*.html'],
 //tasks:['csslint','jshint:beforeconcat','concat','uglify','cssmin']
 }, 
 }
 });
 //注册任务
 grunt.registerTask('default',['watch']);
 grunt.registerTask('check',['jshint:beforeconcat','htmlhint','csslint:strict']);
 grunt.registerTask('finish',['concat','jshint:afterconcat','less','cssmin','uglify']);
};
 //配置完成后,使用cmd进入项目文件夹内,输入grunt即可

 

 

要发表评论,您必须先登录