Several skills of gulp building tools

There is nothing to say about gulp and the installation of its plug-ins, which have been mentioned before. This is primarily used to record some of the simple, commonly used uses of the Gulp build tool.

Most Useful Gulp plug-in rollup

1 if we want to use Gulp compression js file and merge js file, how to operate it.

Using the gulp-uglify and Gulp-concat Plug-ins, the gulpfile.js is roughly as follows:

/**
 * Created by Dreamboy on 2016/8/19.
 * *
var gulp = require (' gulp ');
var gutil = require (' Gulp-util ');
var uglify = require (' gulp-uglify ');
var concat = require (' Gulp-concat ');

Gulp.task (' Concat ', function () {
    //your default task code is placed in this
    gulp.src ('./src/*.js ')
        . Pipe (Uglify ())
        . PIPE ( Concat (' all.min.js '))
        . Pipe (Gulp.dest ('./build '));
};

Gulp.task (' Default ', [' concat ']);

Run Gulp on the command line
the
default task, named Default, will be run, where the task is not doing anything.
to perform specific tasks (task) individually, enter Gulp <task> <othertask>.
 */

More detailed usage can refer to: The Gulp-uglify of Gulp tutorial
2 If we want to write a Web page when the contents of the file changed automatically real-time browser refresh, how should we operate it.

Reference: Implement browser automatically refresh page with Gulp-livereload

Using the Gulp-livereload plug-in, the gulpfile.js is roughly as follows:

/**
 * Created by Dreamboy on 2016/8/21.
 * *
var gulp = require (' Gulp '),
    livereload = require (' gulp-livereload ');

Gulp.task (' Watch ', function () {//Here's watch, is Custom, Ctrip live or other also line
    var server = Livereload ();
    App/**/*.* means any file in any folder under the App folder
    gulp.watch (' App/**/*.* ', function (file) {
        server.changed (File.path); c9/>});

So, one of the highlights here is the Gulp watch function, which listens to file changes. It is conceivable that, through this function, we have more automated operations, such as compressing the file to the specified directory when the contents of the file are changed (this step can be considered a mission task). This way, after listening to the file changes, we can not manually use the Gulp command to compress the file.

3 if we want to compile Sass files using Gulp.

Using the Gulp-sass plug-in, the gulpfile.js is roughly as follows:

/**
 * Created by Dreamboy on 2016/8/22.
 * *
var gulp = require (' gulp ');
var sass = require (' Gulp-sass ');

Gulp.task (' sass ', function () {return
    gulp.src (' stylesheets/**/*.scss ')
        . Pipe (Sass ())
        . Pipe (gulp.dest (' Dist/css ');
});

This executes the Gulp Sass command to compile the sass file directly into the specified directory. In addition, here we have a demand, I want to write sass files in the process of saving files can be compiled in real time files into the corresponding CSS files. So in fact, we need to use the above mentioned Gulp.watch. Add the following gulp task to the original gulpfile.js:

Gulp.task (' Sass-watch ', function () {
    gulp.watch (' stylesheets/**/*.scss ', [' sass ']);

This executes the Gulp Sass-watch command to listen for changes in the Sass file under the corresponding folder and then compile Sass files in real time.

That, we also want to compile, retain the CSS file, but also compress the CSS file. In fact, it is the same idea. Specific reference: Use Gulp for JavaScript and CSS compression merge to achieve. CSS compression gulp-minify-css and rename gulp-rename need to be installed. Modify Gulpfile.js as follows:

/**
 * Created by Dreamboy on 2016/8/22.
 * *
var gulp = require (' gulp ');
var sass = require (' Gulp-sass ');

var minifycss = require (' gulp-minify-css '); CSS file compression
var rename = require (' Gulp-rename ');

Gulp.task (' sass ', function () {return
    gulp.src (' stylesheets/**/*.scss ')
        . Pipe (Sass ())
        . Pipe (gulp.dest (' Dist/css '))
        . Pipe (rename ({suffix: '. Min '))//rename the compressed file name
        . Pipe (MINIFYCSS ())//execute compression
        . PIPE (Gulp.dest (' dist/css '));
};

gulp.task (' Sass-watch ', function () {
    gulp.watch (' stylesheets/**/*.scss ', [' sass ']);

Note: An error may be encountered here:

resolve Error:ENOENT:no Such file or directory, Scandir ' D:\IdeaWork\code-front-jet\node_modules\.npminstall\ Node-sass\3.7.0\node-sass\vendor ' FIX: Run NPM rebuild Node-sass (reference: http://www.cnblogs.com/niepeishen/p/5762162.html)

4 Compile typescript with Gulp

Here we need to use the Gulp-typescript plug-in, the definition gulpfile.js roughly as follows:

var gulp = require (' gulp ');
var ts = require (' Gulp-typescript ');

Gulp.task (' TSC ', function () {
    gulp.src (' app/**/*.ts ')
        . PIPE (TS ())
        . Pipe (Gulp.dest (' Wwwroot/app '));

In order to achieve the function of automatic compilation, we can add a task in the original Gulpfile.js file, such as:

Gulp.task (' tsc:w ', [' TSC '], function () {
    gulp.watch (' app/**/*.ts ', [' TSC ']);
};

In the project generally corresponds to have a typescript configuration file, then we also need to read this file, we need to modify the TSC task above, read the Tsconfig.json file first, such as:

var gulp = require (' gulp ');
var ts = require (' Gulp-typescript ');
var tsproj = ts.createproject (' Tsconfig.json ');

Gulp.task (' TSC ', function () {
    var tsresult = gulp.src (' app/**/*.ts ')
        . Pipe (TS (tsproj))
        . Pipe (Gulp.dest ( ' Wwwroot/app '));

The final gulpfile.js content is as follows:

var gulp = require (' gulp ');
var ts = require (' Gulp-typescript ');
var tsproj = ts.createproject (' Tsconfig.json ');

Gulp.task (' TSC ', function () {
    var tsresult = gulp.src (' app/**/*.ts ')
        . Pipe (TS (tsproj))
        . PIPE ( Gulp.dest (' Wwwroot/app ');
})

; Gulp.task (' tsc:w ', [' TSC '], function () {
    gulp.watch (' app/**/*.ts ', [' TSC ']);
};

Reference: Using Gulp in VS 2015 Typescript official: Teach you how to use Gulp build typescript more detailed usage can refer to: Gulp-typescript

Here's an explanation of the parameters in the Tsconfig.json file:

Target: The standard that JavaScript files generated after compilation need to follow. There are three candidates: Es3, ES5, es2015. Noimplicitany: To False, if the compiler cannot determine the type based on the use of the variable, the any type is substituted. True, a strong type check is made, and when the type cannot be inferred, an error is prompted. Module: The JavaScript module specification followed. The main candidates are: Commonjs, AMD and es2015. In order to stay in line with Node.js, we choose COMMONJS here. Removecomments: Compile the generated JavaScript file to remove the annotation. Sourcemap: Whether to generate the corresponding source map file at compile time. This file is used primarily for front-end debugging. When the current-end JS file is compressed, a source map file with the same name can be used to find the wrong location in the original file. OutDir: Compiles the folder where the output JavaScript files are stored. Include, exclude: folders that need to be included/excluded at compile time.

5 When using the Introduction module in Typescript, the typescript file generates the Commonjs module used by Node.js. It is not available to move the project from the Node.js environment to the browser environment at this time. Browsers do not recognize require functions. Then we need to bundle all the modules into a JavaScript file. Reference: Typescript's official website mentions how you can use Gulp to build typescript.

The Gulpfile.js file can be modified as follows:

/** * Created by the Administrator on 2016/8/24 0024.
* */*var Gulp = require (' gulp ');
var ts = require (' Gulp-typescript ');

var tsproject = ts.createproject (' Tsconfig.json '); Gulp.task (' Default ', function () {return tsproject.src (). Pipe (TS (tsproject)). Js.pipe (Gulp.dest (' Dist
'));
 //** * The following process consolidates the. js files compiled from the. ts file so that the JS can be referenced in the actual page. * Nodejs implements the COMMONJS specification and can use require and exports.
 However, require and exports are not available in the actual browser environment.
 * So we need to bundle all the modules into a JavaScript file. Fortunately, this is exactly what browserify to do.
 More conveniently, it supports the Node.js COMMONJS module, which is exactly the type typescript the default build.
 * That is, typescript and node.js settings do not need to be changed to be ported to the browser. * First, install browserify,tsify and Vinyl-source-stream.
 Tsify is a browserify plug-in that, like Gulp-typescript, can access typescript compilers.
 * Vinyl-source-stream will fit the output file of browserify into a format that gulp can parse, called vinyl.
* NPM Install--save-dev browserify tsify vinyl-source-stream//Modify Gulpfile.js as follows: var gulp = require (' gulp ');
var browserify = require (' browserify ');
var Source = require (' Vinyl-source-stream '); var tsify = require (' tsify ');

var paths = {pages: [' src/*.html ']};

Gulp.task (' copy-html ', function () {return gulp.src (paths.pages). Pipe (Gulp.dest (' dist ')); Gulp.task (' Default ', [' copy-html '], function () {return browserify ({basedir: '. ', debug:true,//Deb Ug:true. This allows tsify to generate the source maps in the output file.
        Source maps allows us to debug typescript source code directly in the browser, instead of debugging on the merged JavaScript file.
        Entries: [' src/main.ts '], cache: {}, Packagecache: {}}). Plugin (tsify). Bundle ()
. Pipe (Source (' bundle.js ')). Pipe (Gulp.dest (' dist '));
 });

For typescript, we also want to generate the compressed Bundle.js file. Real-time monitoring of. ts file changes, and then do the above operation. Gulpfile.js content is modified as follows:

/** * Created by the Administrator on 2016/8/24 0024. *//NPM Install--save-dev Gulp gulp-typescript//1. Compile the typescript file as a JavaScript file and bundle all modules into a JavaScript file Bundle.js//NPM install--save-dev browserify tsify Vinyl-source-stream//2. Compress the generated files above and generate a separate Sourcemap file/npm install--save-dev gulp-uglify vinyl-buffer//3.
    Monitor the changes in the. ts file to do this in real time-start the gulp and keep running, and compile automatically when you save the file.
help you get into the edit-save-refresh browser loop.
NPM install--save-dev watchify gulp-util var gulp = require ("Gulp");
Browserify watchify var browserify = require ("browserify");
var Source = require (' Vinyl-source-stream ');
var watchify = require ("watchify");
var tsify = require ("tsify");

var gutil = require ("Gulp-util");
uglify var uglify = require (' gulp-uglify ');
var sourcemaps = require (' gulp-sourcemaps ');

var buffer = require (' Vinyl-buffer ');

var paths = {pages: [' src/*.html ']}; var watchedbrowserify = watchify (browserify ({basedir: '. ', debug:true, entries: [' Src/maiN.ts '], cache: {}, Packagecache: {}}). Plugin (tsify));

Gulp.task ("copy-html", function () {return gulp.src (paths.pages). Pipe (Gulp.dest ("dist")); function Bundle () {return watchedbrowserify. Bundle ()/*.pipe (Source (' bundle.js ')). Pipe (Gulp . Dest ("dist"));///Add uglify compression function. pipe (source (' bundle.js ')). pipe (buffer ()). PIPE (Sour Cemaps.init ({loadmaps:true}))//These calls allow us to use a separate Sourcemap file instead of the previously embedded sourcemaps. PIPE (Uglify ()). Pipe (SOU
Rcemaps.write ('./')). Pipe (Gulp.dest ("dist"));
} gulp.task ("Default", ["copy-html"], bundle); Watchedbrowserify.on ("Update", bundle); Each time the typescript file changes, Browserify executes the bundle function Watchedbrowserify.on ("Log", Gutil.log); Print the log to the console

6 use Gulp-compass to compile compass,gulpfile.js as follows:

var gulp = require (' Gulp '),
	compass = require (' Gulp-compass '),
	mincss = require (' gulp-minify-css ');

Gulp.task (' CSS ', function () {/
	/compile CSS
	//compress CSS
	gulp.src ('./sass/*.scss ')
		. Pipe (Compass ({
			Config_file: './config.rb ',
			css: ' stylesheets ',
			sass: ' Sass '
		})
		. Pipe (Mincss ())
		. PIPE ( Gulp.dest (' stylesheets ');
})

; Gulp.task (' Watch ', function () {
	gulp.watch ('./sass/*.scss ', [' CSS ']);

Gulp.task (' Default ', [' watch '], function () {
	//Place your default task code in this
	console.log (' task Default ');

Follow-up continuous updates ...