gulp教程

GitHub地址：https://github.com/xiaqijian/gulp_study
建議上GitHub看梦谜，簡書有些鏈接失效
如何使用
--
首先下載安裝gulp

$ npm i gulp -g

在本地建一個文件夾gulp_study

$ mkdir gulp_study

$ cd gulp_study

開始工作

建立配置文件颂斜，并安裝本地gulp依賴

$ npm init

$ npm install gulp --save-dev

在gulp_study文件夾建立相關文件夾

文件結構為

gulp_study
    |
    |
    |--dist // 生成文件
    |
    |--src  //源碼放的位置 
    |   |
    |   |--------js
    |   |---------css
    |   |-----img
    |   |-----less
    |   |-----index.html
    |
    |--gulpfile.js
    |
    |--package.json
    |

gulp處理文件分類

html
css
js
img

主要用到以下插件

gulp-uglify js文件壓縮

gulp-rename 重命名

gulp-minify-css css壓縮

gulp-less 編譯less

gulp-autoprefixer 自動添加瀏覽器前綴

gulp-imagemin image 壓縮

gulp.spritesmith img 雪碧圖

gulp-minify-html html 壓縮

gulp-concat 文件合并

gulp-babel 將es6編譯成es5

gulp-sourcemaps

html [source]

html 主要還是進行代碼壓縮處理

var gulp = require('gulp')
var minifyHtml = require('gulp-minify-html')  // html壓縮
gulp.task('minifyhtml', function(){
    gulp.src('src/index.html')
    .pipe(minifyHtml())
    .pipe(gulp.dest('dist'))
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script type="text/javascript" src="./js/hello.js"></script>
</head>
<body>
    
</body>
</html>

運行

$ gulp minifyhtml

之后就可以在dist文件夾下面看到壓縮好的index.html

css [source]

加載所需插件

var gulp = require('gulp');
var rename = require('gulp-rename'); // 重命名
var minifyCss = require('gulp-minify-css'); // css壓縮
var autoprefixer = require('gulp-autoprefixer') // 自動添加瀏覽器前綴

css代碼壓縮處理

// css 壓縮
gulp.task('minifycss', function(){
    gulp.src('src/css/*.css')
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/css'))
});

css 添加瀏覽器前綴

// 自動添加瀏覽器前綴
gulp.task('autoprefixer', function(){
    gulp.src('src/css/*.css')
    .pipe(autoprefixer({
        browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前綴 默認：true 
    }))
    .pipe(gulp.dest('dist/css'))
});

css 重新命名

// css 重名
gulp.task('renamecss', function(){
    gulp.src('src/css/style.css')
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest('dist/css'))
});

js [source]

js主要經行壓縮驱入，重命名, 合并文件, ES6 轉換ES5

加載插件

var gulp = require('gulp');
var uglify = require('gulp-uglify'); // js文件壓縮
var rename = require('gulp-rename'); // 重命名
var concat = require('gulp-concat'); // 文件合并
var babel = require('gulp-babel'); // ES6編譯成ES5

壓縮

// js文件壓縮
gulp.task('uglify', function(){
    gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});

合并文件，重命名

// 重命名
gulp.task('rename', function(){
    gulp.src('src/js/hello.js')
    .pipe(rename('hello.min.js'))
    .pipe(gulp.dest('dist/js'))
})

// 文件合并
gulp.task('concat', function(){
    gulp.src('src/js/*.js')
    .pipe(concat('concat.js'))
    .pipe(uglify()) // 合并之后壓縮
    .pipe(gulp.dest('dist/js'))
});

將ES6轉換為ES5

// 再使用gulp-babel 之前需安裝一下內容
// npm install gulp-babel babel-preset-2015 --save-dev
// 將ES6轉換成ES5
gulp.task('es6', function(){
    gulp.src('src/js/es6.js')
    .pipe(babel())
    .pipe(gulp.dest('dist/js'))
});

img [source]

關于圖片處理主要經行壓縮都许，制作雪碧圖