Step-by-step creation of REACT+EF6+WEBAPI2+GULP-based projects (front end article)

First, about Gulp

Q1: Why do I need Gulp or grunt?

1. Caching issues, JavaScript and CSS are static files, so when we modify the JavaScript file, often encounter local no problem, but when deployed to the server, the problem persists, usually this is the cache caused

2. Project dependencies such as JavaScript and CSS

The generation of dependencies can lead to longer request times and impact performance. Secondly, more and more JS and CS files, need to request multiple times, and the browser requests each request is limited, so we need to compress JS and CS file, to reduce the number of requests, improve performance.

Q2: Why Choose Gulp?

The core of gulp is the compression of files based on streams, while Grunt is based on temporary file forms. Gulp reduces the production of too many temporary files, about 2 comparisons such as the following table

Grunt	Gulp
Config First	Code First
Base on File	Base on stream
3000+ Plugin	1000+plugin

Second, the process of both is inconsistent

The more grunt:source-->subtask1-->temp.-->subtask2-->target//subtask produce, the more temp files are stored on disk

Gulp:soource-->subtask1-->subtask2-->gulp.dest ()-->target

Gulp is also simpler and clearer in grammatical notation.

//The syntax of gruntGrunt.initconfig ({less: {development: {files: {"Build/tmp/app.css": "Assets/app.less"}} , Autoprefixer: {options: {browsers: [' Last 2 version ', ' IE 8 ', ' IE 9 ']}, Multiple_files: {expand:true, Flatten:true, SRC:' Build/tmp/app.css ', dest:' Build/'}}); Grunt.loadnpmtasks (' Grunt-contrib-less '); Grunt.loadnpmtasks (' Grunt-autoprefixer '); Grunt.registertask (' CSS ', [' less ', ' autoprefixer ']);

// The syntax of Gulp var gulp = require (' Gulp '),    = require (' gulp-less '),    = require (' Gulp-autoprefixer '); Gulp.task (function() {    gulp.src (' assets/app.less ')        . Pipe (Less ())        . Pipe (Autoprefix (' last 2 version ', ' IE 8 ', ' IE 9 ')        . Pipe (Gulp.dest (' build '));});

This article mainly about the purpose of using gulp and how to use, gulp more details please refer to other learning materials

Second, create our Gulp

1. Installation

NPM Install-g Gulp

2. Create our Gulpfile.js file

When using gulp, we need to create gulpfile.js, which is the file name that NPM performs gulp.

A. Define the source and destination of the files we want to compress first

varpaths ={src: {jsx:'SCRIPTS/APP/COMPONENTS/*.JSX', Componentsroot:'./scripts/app/components/', App:'./scripts/app/app.js', Flux:'./scripts/app/flux.js', scripts:'Scripts/**/*.js'}, Dest: {root:'Root', Bundles:'root/scripts/dist', CSS:'Root/content/style/app', Bootstrap:'Root/content/style/libs/bootstrap', Serverbundle:'Serverbundle.js', Clientbundle:'Clientbundle.js', JSX:'scripts/app/components'    }};

B. Other modules that may need to be referenced

var externallibs = ['alt','jQuery ' , ' Bootstrap ' ];

Step-by-step creation of REACT+EF6+WEBAPI2+GULP-based projects (front end article)