Build a basic front-end automation development environment--GULP-based front-end Integration Solution (IV)

With the preparation of the previous sections, you should have a basic understanding of NPM/NODE/GULP, and this section focuses on building a basic front-end automation development environment. The next step is to build a development environment that automatically compiles sass files, compressed JavaScript files, multi-terminal multi-browser synchronization tests, and can also package the files under the project with the Piblish command.

RELATED LINKS navigation

Installing the gulp--Gulp-based front-end integration solution under Windows (i)

What happens when you execute a $GULP-Gulp-based front-end Integration Solution (II)

Common Gulp Plug-in summary--GULP-based front-end Integration Solution (III)

Build a basic front-end automation development environment--GULP-based front-end Integration Solution (IV)

First, create the directory structure

Create the following directory structure, Learn-gulp as our project root directory.

learn-gulp/├──app/│   ├──sass/│   │   └─main.scss│   ├──scripts/│   │   └─javascript.js│   └──index.html├──dist/└──release/

The app is the working directory, and all operations are done in that directory. Gulp detects that a file change automatically processes the file and distributes it to the Dist directory.

Dist the target file directory, here is the compiled, compressed file.

Release files that can be published to the server.

Second, initialize NPM package information

Execute NPM init under the Learn-gulp directory. This step is primarily to create a Package.json file that allows you to share your current environment information with other members of the development team.

Running NPM init will require you to enter information such as project name, version number, description, entry name, keyword, author, license, etc., and enter it according to the actual situation. Here is the Package.json file that I generated after I entered the relevant information for reference:

{  "Name": "Fedis",  "Version": "1.0.4",  "description": "Fedis-front-end Development Integration Solution",  "Main": "Index.js",  "keywords": [    "Gulp",    "Sass",    "Browser-sync",    "Style",    "HTML"  ],  "Author": "Kelsen",  "License": "MIT",  "Bugs": {    "url": "Https://github.com/Leonkao/fedis/issues"  },  "Homepage": "Https://github.com/Leonkao/fedis#readme",  "Repository": {    ' type ': ' Git ',    "url": "Https://github.com/Leonkao/fedis"  }}

Note: Some options may not be filled out, such as the GIT repository option.

Iii. Installing NPM Packages

Installing the NPM package with the command NPM install Package-name, it is recommended to bring the--save parameter so that the software you install is recorded in the Dependencies field for easy sharing of your development environment to other people. For information on the install and--save parameters, refer to NPM Primer-basic usage.

The packages to be installed are listed below

"Dependencies": {    "Browser-sync": "2.10.0",    "Browsersync-ssi": "0.2.4",    " Gulp ":" ^3.9.0 ",    " Gulp-concat ":" ^2.6.0 ",    " gulp-minify ":" 0.0.5 "," Gulp-plumber ":" ^1.0.1 "," Gulp-sass ":" 2.1.0 ",    " Gulp-zip ":" ^3.0.2 "}

For a basic introduction to these packages, refer to the common Gulp plug-in rollup-GULP-based front-end Integration Solution (III).

Iv. Construction of Gulp tasks

After all the packages have been installed, create a new JavaScript file in the project directory Learn-gulp, named Gulpfile.js, to define the tasks in the file. For more detailed information about tasks , see what happens when you perform a $Gulp-a front-end integration solution based on GULP (ii).

1, Load Gulp plug-in.

' Use strict '; var gulp        = require (' Gulp '),    = require (' Browser-sync '). Create (),    SSI         = Require (' Browsersync-ssi '),    concat      = require (' Gulp-concat '),    minify       = require (' gulp-minify '),    plumber     = require (' Gulp-plumber '),     Sass         = Require (' Gulp-sass '),    zip         = require (' Gulp-zip ');

Notice here that the first line of ' use strict ';

2. Build a server to handle the static files and listen to the working directory, and execute the browsersync.reload reload page as soon as the working directory changes.

function () {    browsersync.init ({        server: {            basedir:["./dist"],            Middleware:ssi ({                BaseDir: './dist ',                ext:'. shtml ',                version:' 2.10.0 '            }}        )    ;    Gulp.watch ("App/scss/**/*.scss", [' sass ']);    Gulp.watch ("App/scripts/**/*.js", [' JS ']);    Gulp.watch ("app/**/*.html", [' HTML ']);    Gulp.watch ("dist/**/*.html"). On ("Change", Browsersync.reload);});

If you have any questions, you can refer to the official documents: Browsersync.io

3. Compile the Sass file, and automatically inject it into the browser

// Compile sass into CSS & Auto-inject to browsers function () {        return gulp.src ("App/scss/**/*.scss").        Pipe (Plumber ())        . Pipe (Sass.sync (). On (' error ', sass.logerror)        . Pipe (Sass ({outputstyle:"compact"})        . Pipe (Gulp.dest ( "Dist/styles"))        . Pipe (Browsersync.stream ());});

It is important to note that App/scss/**/*.scss is the meaning of all scss files in the app/scss/directory.

4. Compressing JavaScript files

// javscript files operate function () {    return gulp.src (' app/scripts/**/*.js ')        . PIPE (Plumber ())        . Pipe (Minify ())        . Pipe (Gulp.dest ("dist/scripts"))        . Pipe (Browsersync.stream ());});

All JavaScript files under learn-gulp/app/scripts/are compressed and distributed to the learn-gulp/dist/scripts/directory, and each file will generate corresponding compressed files, such as File.js & File.min.js

5. Working with HTML files

function () {        return gulp.src ("app/*.html").        Pipe (Plumber ())                . Pipe (Gulp.dest ("Dist /"))        . Pipe (Browsersync.stream ());});

There are no changes to the HTML file here, you can do some things according to the actual situation.

6. Package Release target file

// Publish function () {    return gulp.src (' dist/**/* ').        Pipe (Plumber ())        . Pipe (Zip (' Publish.zip ')        . Pipe (Gulp.dest (' release ')});

This task is responsible for packaging the files in the Learn-gulp/dist directory into a zip file and distributing them to the Learn-gulp/release directory.

Run the command $ gulp Publish to perform the task.

7. Edit the default task

Gulp.task (' Default ', [' HTML ', ' serve ');

The default task is the first task that is performed when you run Gulp. We perform the serve task through the default task.

V. Start of work

1, run the Gulp command, if there is no exception gulp has started to work, the browser will open automatically.

2. Open Learn-gulp/app/scss/main.scss to enter the following content

 .fedis-main  { Background-image : Span style= "color: #0000ff;" > Linear-gradient (135deg, #573e81, #133259 40%, #133259) ;  color :  #FFF ;  padding :  80px ;  H1{font-size :  6em ;  font-family :  Arial, Helvetica, Sans-serif ;  Text-align :  center ; font-weight : ; }}.footer  {color :  #888 } 

When you press Ctrl+s to save, the Sass task executes automatically and a CSS file is generated learn-gulp/dist/styles/the directory after the execution is completed MAIN.CSS

3. Open the editor in the learn-gulp/app/index.html file to enter the following content

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no">    <title>Welcome-fedis</title>    <Linkrel= "stylesheet"href= "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">    <Linkrel= "stylesheet"href= "//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css">    <Linkrel= "stylesheet"href= "Styles/main.css"></Head><Body>    <Divclass= "Container"ID= "Main">        <Divclass= "Row">            <Divclass= "Col-md-12">                <Divclass= "Jumbotron text-center fedis-main">                    <H1>Fedis</H1>                                        <P>Front-End Development Integration Solution</P>                    <Small>                        <aclass= "Btn btn-success"href= "http://shang.qq.com/wpa/qunwpa?idkey=1aab8e1fc1e992b7390185551e84701163bb9dbdc32a769b185d9f8fd6e70262" Target= "_blank"><Iclass= "fa fa-qq"></I>Join Q Group<BR>221702761</a>                    </Small>                </Div>                <HR>                <Divclass= "Footer Text-center">                    <Small>Fedis 1.0.0 Created by Kelsen</Small>                </Div>            </Div>        </Div>    </Div>        <Scriptsrc= "Http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></Script>    <Scriptsrc= "Scripts/javascript.js"></Script></Body></HTML>

at this point press the The index.html file at the corresponding location under Ctrl+s learn-gulp/dist/will be replaced by the new version, and the browser will automatically display the latest results. If everything works, you will see the following screen in the Web page:

Written in the last

Example Project Fedis source code can be obtained in the following two ways

1. GitHub (recommended) Https://github.com/leonkao/fedis

$ git clone https://github.com/leonkao/fedis.git

2, Npmjs Https://www.npmjs.com/~kelsen

Install Fedis

this series of articles to the end of this, if you have any suggestions or questions, please contact the following, you can also through Web front-end senior engineer Group for online communication.

Build a basic front-end automation development environment--GULP-based front-end Integration Solution (IV)