gulp basic operations

1, the installation Taobao mirror

asl install cnpm --registry g = https: //registry.npm.taobao.org

cnpm -v

2, build the project description file package.json

the init NPM
CNPM the init (can replace npm init)

(Required project name, version number, description, entry file, run the command, author, certificate ---- all the way to press Return)

3, the global installed gulp

cnpm i gulp@3 -g

Global installed gulp

@ 3 represents the chosen version 3

i shall install

-g is the --global

gulp -v

4, the current directory inside the module mounting gulp

cnpm i gulp@3 -D

cnpm i gulp @ 3 -S (both can choose one)

-D abbreviation --save-dev Development dependence

-S abbreviation --save project dependencies

Development-dependent: the development process requires the use of module-dependent, does not need to project on the module when --- line code format check module

Project dependencies: the project still need to use the on-line module

----- If you do not know how to select, then you write -S

5. Create a file gulpfile.js, configuration gulp

const gulp = require('gulp');

dist directory within 5.1 to create index.html, for the completion of the copy operation using gulp index.html, and copied to the current directory

+++
// 复制index.html 到 dist 目录
gulp.task('copy-index', function () {
    gulp.src('./index.html')
        .pipe(gulp.dest('dist'))
})

Command line executed gulp copy-index found more than dist directory

5.2 gulp/css/a.css + gulp/css/b.css

5.2.1 Copy gulp / css to dist / css

gulp.src('./css/**/*')

All the files and copy files css folder within a folder

+++
gulp.task('copy-css', function () {
    gulp.src('./css/**/*')
        .pipe(gulp.dest('dist/css'))
})

gulp copy-css

5.2.2 merge css file

cnpm i gulp-concat -S

//++++
const concat = require('gulp-concat');
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到所有的css
        // ++++
        .pipe(concat('main.css')) // 合并
        .pipe(gulp.dest('dist/css'))
})

5.2.3 compression css

cnpm i gulp-minify-css -S

// ++++
const minifyCss = require('gulp-minify-css');
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到所有的css
        .pipe(concat('main.css')) // 合并
        // ++++
        .pipe(minifyCss()) // 压缩
        .pipe(gulp.dest('dist/css'))
})

5.2.4 both uncompressed also have compressed

cnpm i gulp-rename -S

Heavy naming

The combined code into dist / css

Rename then compressed into css dist / css

//+++
const rename = require('gulp-rename');
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到所有的css
        .pipe(concat('main.css')) // 合并
        //+++
        .pipe(gulp.dest('dist/css'))
        .pipe(minifyCss()) // 压缩
        //+++
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('dist/css'))
})

5.3 gulp/js/a.js + gulp/js/b.js

5.3.1 Copy gulp / js to dist / js

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(gulp.dest('dist/js'))
})

5.3.2 combined js code to dist / js

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        // +++
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/js'))
})

5.3.3 compression js

cnpm i gulp-uglify -S

Js compression module

//+++
const uglify = require('gulp-uglify');

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(concat('main.js')) // 合并js
        // +++
        .pipe(uglify()) // 压缩js
        .pipe(gulp.dest('dist/js'))
})

5.3.4 merger compression rename

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(concat('main.js')) // 合并js
        // +++
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify()) // 压缩js
        // +++
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('dist/js'))
})

5.4 gulp / assets --- Pictures

5.4.1 Copy image to dist / assets

//+++
gulp.task('copy-images', () => {
    gulp.src('./assets/**/*')
        .pipe(gulp.dest('dist/assets'))
})

5.4.2 Compress Pictures

NCPM i gulp -S imagemin

//+++ 
const imagemin = require('gulp-imagemin');
gulp.task('copy-images', () => {
    gulp.src('./assets/**/*')
        // +++
        .pipe(imagemin()) // 压缩图片
        .pipe(gulp.dest('dist/assets'))
})

5.5 data processing data / home.json data / kind.json

When there is no back-end interface to their analog data

copy

// +++
gulp.task('copy-data', () => {
    gulp.src('./data/**/*')
        .pipe(gulp.dest('dist/data'))
})

6, a one-time performing multiple tasks

Name of the task do not own arbitrary definition, write build
command-ended input: gulp -build

// +++
gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => {
    console.log('success')
})

7, gulp server

cnpm i gulp-connect -S

server task name can not be changed

//+++
gulp.task('server', () => {
    connect.server({
        // 说明服务器的根目录
        root: 'dist',
        livereload: true // 实时更新
    })
})

8, detection html files, css files, js files, images, change data, perform different tasks

Command window: gulp -watch, after the execution of change content outside the content of the file will change in dist

// +++
gulp.task('watch', () => {
    gulp.watch('index.html', ['copy-index'])
    gulp.watch('css/**/*', ['copy-css'])
    gulp.watch('js/**/*', ['copy-js'])
    gulp.watch('assets/**/*', ['copy-images'])
    gulp.watch('data/**/*', ['copy-data'])
})

9, while the default task execution server tasks and watch

Command window: gulp

gulp.task('default', ['server', 'watch'])

gulp

10, hot update - automatically update page

In the page, css, js, images, data related tasks performed last sentence, restart the server

gulp.task('copy-data', () => {
   gulp.src('./data/**/*')
       .pipe(gulp.dest('dist/data'))
       .pipe(connect.reload()) //*********************************************
})