Requirejs + SASS Implementation of front-end and grunt automation construction

For now Vue, react, webpack may be a bit old, sometimes, the simpler the more reliable technology, back up

Module.exports =function(grunt) {//Project configuration.Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), Compass: {development: {options: {generatedimagesdir :' Public/src/slice ',//merged sprite dirImagesdir: ' Public/src/slice ',//Sprite image merge before picture fragment DirSassdir: ' Public/src/sass ', Cssdir:' Public/src/sass-css ', Outputstyle:' Compressed ',//CSS output mode. Can be:nested, expanded, compact, compressed.Forcefalse}}, Sprite: {options: {//Sprite Background Map source folder, only matching this path will be processed, default images/slice/ImagePath: ' public/src/slice/',                //Sprite Graph Output Directory, note that will overwrite the previous file! Default Images/Spritedest: ' public/src/css/',                //Replace the background path, default: /images/Spritepath: ' img/',                //The spacing between each picture, if set to odd, will force +1 to ensure that the resulting 2x picture is even width, the default 0Padding:2,                //whether to generate a new sprite file with a timestamp for the file name, and if enabled, note clean up the files generated before the new file is not generated by defaultNewsprite:false,                //if the version number of ver is not set, the time stamp is appended to the Sprite, which is not appended by defaultSpritestamp:true,                //appends a timestamp to the end of the CSS file, without appending the defaultCssstamp:false,                //default two-fork tree optimal permutation algorithmAlgorithm: ' Binary-tree ',                //use the ' pngsmith ' image processing engine by defaultEngine: ' Pngsmith ',                //Version numberVerNewDate (). toisostring (). Replace (/\d/g, "}, Autosprite: {files: [{expand:true, CWD:' public/src/sass-css/', SRC:' **/*.css ', dest:' public/src/css/', ext:'. css '}]}, Imagemin: {dynamic: {options: { Optimizationlevel:3//PNG picture optimization level, 3 is the default value, the value interval 0-7}, files: [{expand:true, CWD:"public/src/css/img/",//Compress only the merged pictures produced by the spriteSRC: "**/*.png", dest:"public/src/css/img/"}]}, clean: {sasscss:{src: ["Public/src/sass-css/*"]}, CSS: {src: [' public/src/css/* ']}, js:{src:[' public/dist/js/* ']}}, copy: {font: {expand:true, CWD:' Public/src/font ', SRC:‘**‘, dest:' Public/font '}, CSS: {expand:true, CWD:' public/src/css/', SRC:‘**‘, dest:' public/dist/css/'}}, Babel: {options: {presets: [' Env '],//The same as latest,including es2015,es2016,es2017 pluginsPlugins: ["TRANSFORM-ES2015-MODULES-AMD"],//import file translate to AMD moduleSourcemap:true}, Files: {expand:true, CWD:' public/src/babel/es6/',//just a test nowSRC: [' **/*.js '], dest:' public/src/babel/es5/'}}, Uglify: {options: {banner :‘/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n ', Sourcemap:true, mangle:false,//do not confuse variable namesComments: ' Some '//keep comments such as @preserve @license @cc_on}, Build: {files:[{Expand:true, CWD:' Public/src/js ', SRC:' **/*.js ', dest:' Public/dist/js ', ext:'. js ', Extdot:' Last '}]}}, Requirejs: {build: {options: { Optimize:' None ',//Specify the compression tool, none does not compressBASEURL: ' Public/dist/js ',//file merging on a compressed moduleMainconfigfile: ' Public/dist/js/require.config.js ', dir:"Public/dist/js",//output FolderKeepbuilddir:true,//Do not delete the Rebuild Dir folder during the build processAllowsourceoverwrites:true,//The dir folder is allowed to overwrite the pre-build file as well as the source folderRemovecombined:false, Findnesteddependencies:false, Optimizecss:' None ', modules:[{/** * * * * This merged module is used almost every page, will be a common module, please ensure that the module before the page JS file introduction, to avoid repeatedly loading the merged files, Because the Requirejs module default loading is not in order, the module is placed into Views/component/foot.ejs, a few pages that do not refer to foot are handled separately, Page/head.js is not using Requi The module of re or its dependency is introduced, declare it as a named module (define ("Page/head", [Xxx,xxx],function () {})) to avoid the module not merging in development mode The Times error *********/Name:"Page/head", create:false}, {name:' Ui/ui ', include:["Ui/ux", "Ui/ejs", "UI/TPL"], exclude:["jquery", "pin", "request"], create:false}, {name:' Highstock ', include:["Raphael", "Chart/maps/chinamap"], exclude:["jquery"], create:false}, {name:"Common/common", include:["jquery", "pin", "request", "Common/common", "Common/gapageview"], excludeshallow:["Ui/ux", "Ui/ejs", "UI/TPL"], create:false}, {name:' Page/analyze/analyze_report ', include:[' Page/analyze/report/step1 ', ' page/analyze/report/step2major ', ' Page/analyze/report/step2sch '], exclude:["jquery", "pin", "request", "Ui/ux", "Ui/ejs", "Ui/tpl", "Common/common", "Page/head"], create:false}, {name:' Page/zhiyuan/zhiyuan ', include:["Page/zhiyuan/list/selectarea", "Widget/page", "Common/fixbottom"], exclude:["jquery", "pin", "request", "Ui/ux", "Ui/ejs", "Ui/tpl", "Common/common", "Page/head"], create:false}]}}, watch: {Opti ONS: {spawn:true, Interrupt:true, Debouncedelay:250}, sass:{files:' Public/src/sass/**/*.scss ', tasks: [/*"Clean:sasscss",*/"Clean:css", "Compass", "Sprite"]}, babel:{files:' Public/src/babel/es6/**/*.js ', tasks:[' Babel ']            }        }    }); //plug-ins for loading tasks    //CSS    //Node-compass requires compass and Ruby gem, install ruby then install Compass via gemGrunt.loadnpmtasks (' Grunt-contrib-compass '); Grunt.loadnpmtasks (' Grunt-contrib-cssprite '); Grunt.loadnpmtasks (' Grunt-contrib-imagemin '); Grunt.loadnpmtasks (' Grunt-contrib-clean '); Grunt.loadnpmtasks (' Grunt-contrib-copy '); //JSGrunt.loadnpmtasks (' Grunt-babel '); Grunt.loadnpmtasks (' Grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-requirejs '); //WatchGrunt.loadnpmtasks (' Grunt-contrib-watch '); //compilation tasks for the development periodGrunt.registertask (' Default ', [        "Clean:sasscss",        "Clean:css",        "Compass",        "Sprite",        "Babel"        ]); //in-development monitoring, automatic compilation (with a bit of frequent discretion)Grunt.registertask (' Watcher ', [' Watch ']); //Compression and releaseGrunt.registertask (' Dist ', ["Imagemin", "Copy", "Clean:js", "uglify", "Requirejs"]); //Test TaskGrunt.registertask (' Test ', [/*" Clean:js", "uglify",*/"Requirejs"]);}

Package.json

"Devdependencies": {    "grunt": "~0.4.5",    "Grunt-babel": "^7.0.0",    " Grunt-contrib-clean ":" ~0.4.0 ",    " grunt-contrib-copy ":" ~0.5.0 ",    " Grunt-contrib-cssprite ":" ~0.1.3 ",    " grunt-contrib-imagemin ":" ~2.0.1 ",    " Grunt-contrib-jshint ":" ~0.6.0 ",    " Grunt-contrib-requirejs ":" ^1.0.0 ",    " Grunt-contrib-uglify ":" ~0.5.0 ",    " Grunt-contrib-watch ":" ~1.0.0 ",    " Grunt-contrib-compass ":" ~0.7.2 "  }

Requirejs + SASS Implementation of front-end and grunt automation construction