Gulp,grunt,webpack Rookie Finishing

First of all, it is not very good to put webpack here, because Webpack is more accurate than the require,sea of such modular tools, and the former two more inclined to compression confusion and so on;

After downloading the NPM package, each of the three will need their config file;

Grunt Congfig File Writing format is a key value, similar to the writing of a configuration, gulp is a fallback function, like programming, Wepack configuration written similar to a common specification;

Direct code example:

Grunt

 module.exports = function (grunt) { require ("Load-grunt-tasks") (Grunt)//This package is loaded with all the required tasks, Just don't need one more require       
varconfig={register:"Public/src/register", Lib:"Public/lib", SRC:"Public/src", Index:"Public/src/index", dest:"Dist", HTML:"HTML", CSS:"Public/css/sass/stylesheets"}//Set Path Grunt.initconfig ({config:config, Pkg:grunt.file.readJSON (' Package.json '),//This tells Grunt bar Packjson data saved to pkg this variable and then convenient to read, in fact, this dispensable uglify: {//Code obfuscation task options: {Bann ER:‘/*! <%= pkg.file%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '}, Build: {files:{' <%=config.lib%>/test.min.js ': [' <%=config.dest%>/test2.js ']}}, jshint:{//this is to let grunt automatically write to the JS to check files: [' Router/*.js '], Options: {curly:true, Browser:true, Latedef:true, unused:true, undef:true, Devel:true, node:true, jquery:true}}, cssmin:{//this is a task package for compressing CSS compress:{files:{ ' <%=config.css%>/index.min.css ': ' <%=config.css%>/index.css '}} , concat:{//This is the package options for file merging: {separator: /c5>‘;‘}, Dist: {src: [' <%=config.src%>/index/controller/*.js '], dest:' <%=config.dest%>/ngconfig.js '}}, copy:{//file copy dist:{files:[{flatten: true, filter:' Isfile ', expand:true, SRC:' <%=config.css%>/*.css ', dest:' css/mycss/'}]}, clean:{//file clears dist:{src:"Css/mycss/*"            }        }    }); Grunt.registertask (' Default ', [' concat ', ' uglify ']); Registering the default task is first merging in confusion, noting that the combined task can continue to be combined
}

The following gulp configuration file example

var gulp = require (' gulp '), var htmlmin = require (' gulp-htmlmin '), var cssmin= require (' gulp-minify-css '), imagemin = Require (' gulp-imagemin '), Clean=require (' Gulp-clean '), sass = require (' Gulp-ruby-sass '); Gulp.task (' minify '), function () {//gulp's idea has a concept of flow, similar to the starting point-the process-destination concept, the task name can be arbitrarily gulp.src (' test.html ')//This is an HTML compression task. Pipe (Htmlmin ({collaps Ewhitespace:true}). Pipe (Gulp.dest (' dist ')}); Gulp.task (' A ', function () {//This is the picture compression task Gulp.src (' public/img/*.{ Png,jpg,gif,ico} '). Pipe (Imagemin ()). Pipe (Gulp.dest (' dist/img ');}); Gulp.task (' Testcssmin ', function () {//This is a CSS compression task gulp.src (' public/css/sass/stylesheets/index/index/*.css '). Pipe (Cssmin ({advanced:false, keepbreaks:false})). Pipe (Gulp.dest (' dist/index.min.css '));});            Gulp.task (' sass ', function () {return sass (' Public/css/sass/sass/*.scss '). On (' Error ', function (err) {        Console.error (' error! ', err.message); }). Pipe (Gulp.dest (' dist/'));}); Gulp.task (' Watch ', function () {///This is the Listener File change task Console.log (' Keep killing you! ') Gulp.watch (' src/*.html ', [' minify ');}); Gulp.task ("Clean", function () {//This cleanup task gulp.src ("dist/img"). Pipe (Clear ())}) Gulp.task (' Build ', [' testcssmin ', ' a ']) This is to create a new task for yourself and then follow the sequence in dev

Configuration code for Webpack

var webpack = require (' Webpack '); var commonsplugin = new Webpack.optimize.CommonsChunkPlugin (' Common.js ');     Module.exports = {//Plugin entry plugins: [Commonsplugin],//Page entry file Configuration entry: {index: './src/js/page/index.js ' },//ingress file output config: {path: ' dist/js/page ', filename: ' [name].js '}, module: {//load Device Configuration loaders: [{test:/\.css$/, Loader: ' Style-loader!css-loader '}, {test:/\.js$/, Loader : ' Jsx-loader?harmony '}, {test:/\.scss$/, Loader: ' Style!css!sass?sourcemap '}, {test:/\. ( png|jpg) $/, loader: ' url-loader?limit=8192 '}]},//Other solution configuration resolve: {root: ' E:/github/flux-examp Le/src ',//absolute path extensions: [', '. js ', '. json ', '. Scss '], alias: {appstore: ' Js/stores/appstor Es.js ', ActionType: ' Js/actions/actiontype.js ', appaction: ' Js/actions/appaction.js '}} };

　　

Gulp,grunt,webpack Rookie Finishing