Gulp,grunt,webpack Rookie Finishing

Source: Internet
Author: User
Tags file copy

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.