Front-end development environment Grunt Automatic Watch compression js file and compile Sass file

Grunt-javascript task runner for the front-end development environment

Objective:

1.sass compiled as a CSS file, the previous time to write CSS, later looked at sass very good, so in the new project began to use the sass.

The original method:

① Installing Ruby

② compiling the Sass file (Eg:style)

Sass Style.scss Style.css

③ Monitor File/folder changes to automatically compile Sass files

Sass--watch Style.scss:style.css #file

Sass--watch Cssfilepath #directory (path to Cssfilepath:sass file)

Note:

　　　　　　SASS Compilation Style:

* Nested: Nested indentation of the CSS code, which is the default value.

* Expanded: No indented, extended CSS code.

* Compact: A concise form of CSS code.

* Compressed: Compressed CSS code.

2.js files before compression processing, if found is also used webmaster tools to compress the use of the following, the operation process is slightly more

　　

<!--grunt Start-->

Grunt is based on Nodejs, need to install the following Nodejs before use, official website: nodejs.org, installation method as normal software installation. The Nodejs module is installed with NPM management.

1. Installing Nodejs

2. Create a new Grunt project

Standard configuration:

Package.json #项目数据

Gruntfile.js #配置grunt, set up tasks, load plugins, etc.

Note: How to write a file later we describe, first build two files, the file code can be copied directly

2. Installing grunt

NPM Install GRUNT-CLI

Note: installation grunt-cli is not equal to installing the Grunt task Runner! The task of the Grunt CLI is to run the Gruntfile specified Grunt version. This allows multiple versions of Grunt to be installed on a single computer at the same time.

　　3. Install the required grunt plug-in

NPM Install Grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch--save-dev

Note:--save-dev Auto Perfect Package.json

Grunt-contrib-sass #sass编译插件
Grunt-contrib-uglify #js压缩插件
Grunt-contrib-watch #监控插件

4. Operation Monitoring method

Grunt Watch

　　First write technical articles, incorrect/unknown many contain, there are problems to discuss together.　　

　Packjson Code:

　　　　

1 {2"Name": "Ajaxtest",//project name3"description": "Baiyuncms-wap-ajax",//Project Description4"Version": "0.1.0",//project version5"Private":true,//The answer given on the specific unknown StackOverflow is related to the optional version control6"Author": {7"Name": "Unofficial",8"Email": "[email protected]"9 },//OptionalTen"Devdependencies": { One"Grunt": "^0.4.5", A"Grunt-contrib-sass": "^0.7.3", -"Grunt-contrib-uglify": "^0.5.1", -"Grunt-contrib-watch": "^0.6.1" the }//Ambiguous version can use * instead of using--save-dev will automatically fill in the version must -}

Gruntfile.js

　　

Module.exports =function(grunt) {//Project configuration.Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), Skinpath: {js:' Ajaxtest/skin/js ',//jsname bynewpageCSS: ' Ajaxtest/skin/css '//cssname Style},//Optional when not in use, the path involved in the specific configuration file needs to be modified uglify: {options: {banner:‘/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '}, Build: {src:' <%= skinpath.js%>/bynewpage.js ', dest:' <%= skinpath.js%>/bynewpage.min.js '},//js Compressed configuration file sass: {//TaskDist: {//TargetOptions: {//Target OptionsStyle: ' Expanded '}, files: {//Dictionary of files' <%= skinpath.css%>/style.css ': ' <%= skinpath.css%>/style.scss '//' destination ': ' Source '}}},//sass compiled configuration file watch: {files: [' <%= uglify.build.src%> ', ' <%= skinpath.css%>/style.scss '], tasks: [' Default ']}//monitor configuration file}); //Load the plugin loading pluginGrunt.loadnpmtasks (' grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-sass '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); //Default task (s). Execute the Grunt methodGrunt.registertask (' Default ', [' uglify ', ' sass ']);};