Gulp+webpack Configuration

gulp+webpack Configuration first, let's introduce Gulp and Webpack . Gulp

Gulp is a tool for building the code in the front-end development process, and is the building block of the automation project; She not only optimizes the site resources, but also many repetitive tasks can be done automatically with the right tools during the development process. Using her, we can not only happily write code, but also greatly improve our efficiency.

Gulp is a NODEJS-based automatic task runner that automates the testing, checking, merging, compressing, formatting, automatic browser refresh, and deployment file generation of JAVASCRIPT/COFFEE/SASS/LESS/HTML/IMAGE/CSS and other files. And listen for files that repeat the specified steps after the change. In the implementation, she borrowed from the Unix operating system pipeline (pipe) thought, the previous level of output, directly into the back-level input, making it very simple to operate. Through this article, we will learn how to use Gulp to change the development process to make development faster and more efficient.

Gulp and Grunt are very similar, but the gulp flow operation is faster and easier to build than Grunt's frequent IO operations. Webpack

Webpack is now the most popular modular management and packaging tool for front-end resources. It can package many loose modules according to dependencies and rules into front-end resources that meet the deployment of the production environment. You can also code-separate modules that are loaded on demand, and then load asynchronously when you actually need them. With loader conversion, any form of resources can be seen as modules, such as CommonJs modules, AMD modules, ES6 modules, CSS, images, JSON, coffeescript, less and so on.

* * Of course individuals still like Webpack's modular excellent nonsense not much to say now start Gulp trip Initialize project (here already think node environment already installed) Create folder name yourself like Gulptext, Then enter the following command

$ cd  gulptext
 $ mkdir images//    build Store Picture folder
 $ mkdir src       //  store JS as well as CSS
 $ mkdir index.html   //Home
 $ mkdir gulpfile.js//       Write Gulp task file
 $ mkdir mock       //mock data

then enter the following command and then go all the way to generate the JSON file.

$NPM Init

Open the JSON file and see this

1474889102536.png Global Installation Gulp so that we can run gulp for packaging and other operations

$NPM Install Gulp-g

If you feel that NPM installation is slow, you can switch to CNPM download, the code is as follows

$NPM Install Cnpm-g

Install the Gulp package to facilitate our reference gulp

$NPM Install Gulp

Successful screenshot

1474889517162.png Writing Gulp task Introduction Gulp

Introduction of Gulp
var gulp  = require (' gulp ');

copy index.html

copyhtml
gulp.task (' Copy-index ', function () {
    gulp.src ('./index.html ')
    . Pipe (Gulp.dest ('./build ')) ;
})

Execute Command

$ Gulp Copy-index

1474890843877.png] (http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/ auto-orient/strip%7cimageview2/2/w/1240)

1474890828271.png Copy Images

Copy Images
gulp.task (' Copy-images ', function () {
    gulp.src ('./images**/* ')
    . Pipe (Gulp.dest ('./build /'));
})

Execute Command

$ Gulp Copy-iamges

1474891076408.png

1474891039689.png CSS preprocessing Now we create files in the SRC directory styles to put our SCSS code, we need to compile the SCSS code into/build/prd/styles/

$ cd src
$ mkdir Styles
$ cd styles $
Touch app.scss
$ touch common.scss

APP.SCSS Project Code

@charset "UTF-8";
@import "./common.scss";
body{
    background-color: $base-color;
    Color: #000;
    font-size:20px;
    font-weight:800;
}
html{
    width:100%;
    height:100%;
}
html{
    width:100%;
    height:100%;
}
. lsds{
    width:100px;
    height:100px;
}

COMMON.SCSS Code

$base-color:yellow;

To install a CSS precompiled package

$ npm Install gulp-sass   //sass Edit Package
$ npm Install gulp-minify-css ');  CSS Compression Package

Introducing CSS preprocessing module
var  sass= require (' Gulp-sass ');
Introducing CSS Compression module
var  minifycss  = require (' gulp-minify-css ');
CSS preprocessing

var  cssfiles=[
    './src/styles/app.scss '
];
Gulp.task (' Scss ', function () {
    gulp.src (cssfiles)
    . Pipe (Sass (). On (' Error ', Sass.logerror))
    . PIPE ( Minifycss ())      
    . Pipe (Gulp.dest ('./build/prd/styles/'))
})

Edit Scss

$ Gulp Scss

Open Service Installing the server package

$ NPM Install Gulp-webserver

Introduction of the Gulp-webserver module
var server = require (' Gulp-webserver ');
Gulp.task (' Server ', function () {
     gulp.src ('./')
     . Pipe (Server ({
         host: ' 127.0.0.1 ',   //ip
         Port :    //Port
         directorylisting:{
             enable:true,
             path: './'
         },
         livereload:true,})
     ;
})

Open Service Command

$ Gulp Server

Then you can visit 127.0.0.1 and add watch .

Detects file changes, performs the corresponding task
gulp.task (' Watch ', function () {
    gulp.watch ('./index.html '), [' Copy-index ']);
    Gulp.watch ('./images/**/* ', [' copy-images ']);
    Gulp.watch ('./src/styles/*.{ SCSS,CSS} ', [' scss ', ' min ']);  Remove min
  //    Gulp.watch ('./src/scripts/*.js ', [' Packjs ', ' min '])  //This line is first used after configuring JS compilation
})
// The first parameter represents the listening file the  second parameter is the task

to perform//configure the default task, execute the task queue

gulp.task (' Default ', [' Watch ', ' Server '],function () {
    console.log (' Task queue execution completed ');
})

Configure Webpack

Mounting module

$ npm Install vinyl-named $ npm Install gulp-webpack $ npm Install gulp-uglify 

//introduced JS Modular tool gulp-webpack, get JS file module Vinyl-named,js Compression module var named = require (' vinyl-named ');
var webpack = require (' Gulp-webpack ');


var uglify = require (' gulp-uglify ');
var jsfiles = ['./src/scripts/app.js '];
            Gulp.task (' Packjs ', function () {GULP.SRC (jsfiles). Pipe (named ()). Pipe (Webpack ({output:{ FileName: ' [name].js '}, module:{loaders:[{test:/\.js$/ , loader: ' Imports?define=>false '}]}). PIPE (uglify
         (). On (' Error ', function (err) {console.log (' \x07 ', err.linernumber,err.message); Return