Skip to content

Latest commit

 

History

History
304 lines (285 loc) · 8.1 KB

Gulp构建流程.md

File metadata and controls

304 lines (285 loc) · 8.1 KB
Raw

2016-3-7

构建步骤

// 开发环境
var develop = {
    base: 'src',
    temp: 'src/.temp',              // html，js，css压缩合并后生成的临时目录
    html: 'src/html',
    js: 'src/js',
    images: 'src/images',
    lib: 'src/lib',
    path: '__PATH__'
};
// 线上环境
var release = {
    base: 'dist',
    html: 'dist/html',
    js: 'dist/js',
    images: 'dist/images',
    lib: 'dist/lib',
    path: 'dist'
};

1、 处理html文件里的静态资源

合并压缩并替换路径

// index.html
// css
<!-- build:css dist/lib/css/base.min.css -->
<link href="../lib/css/a.css" rel="stylesheet">
<!-- endbuild -->

// js
<!-- build:js dist/lib/js/base.min.js -->
<script type="text/javascript" src="../lib/js/a.js"></script>
<!-- endbuild -->
var useref = require('gulp-useref');
gulp.task('compress', ['clean', 'sass'], function () {
    var assets = useref.assets();
    return gulp.src( develop.html + '/**/*.html' )
        .pipe( assets )
        .pipe( gulpif('*.js', uglify()) )
        .pipe( gulpif('*.css', minifyCss()) )
        .pipe( assets.restore() )
        .pipe( useref() )
        .pipe( revAll.revision() )
        .pipe( gulpif( '*.html', replace(develop.path, release.path) ) )
        .pipe( gulp.dest(develop.temp) );
});

gulp compress

[18:45:26] Starting 'clean'...
[18:45:26] Starting 'src:sass'...
[18:45:26] Finished 'src:sass' after 3.46 ms
[18:45:26] Starting 'lib:sass'...
[18:45:26] Finished 'lib:sass' after 1.34 ms
[18:45:26] Starting 'sass'...
[18:45:26] Finished 'sass' after 2.28 μs
[18:45:26] Finished 'clean' after 35 ms
[18:45:26] Starting 'compress'...
[18:45:26] Finished 'compress' after 220 ms

├── dist
└── src
    ├── .temp
        ├── lib
            ├── js
                └── base.min.7cc98ad0.js
            ├── css
                └── base.min.7cc98ad0.js
        ├── html
            └── index.html
    ├── images
        └── 1.jpg
    ├── fonts
        └── ratchicons.ttf
    ├── css
        └── a.css
    ├── scss
        └── a.scss
    ├── js
        └── a.js
    ├── html
        └── index.html

// index.html
// css
<link href="dist/lib/css/base.min.7cc98ad0.css" rel="stylesheet">

// js
<script type="text/javascript" src="dist/lib/js/base.min.7cc98ad0.js"></script>

├── dist
└── src
    ├── images
        └── 1.jpg
    ├── fonts
        └── ratchicons.ttf
    ├── css
        └── a.css
    ├── scss
        └── a.scss
    ├── js
        └── a.js
    ├── html
        └── index.html

2、 把.temp里面处理过的文件移到正式目录去

gulp.task('move', function (){

    gulp.src( develop.base + '/**/images/**' )
        .pipe( gulp.dest( 'dist' ) );

    gulp.src( develop.base + '/**/fonts/**' )
        .pipe( gulp.dest( 'dist' ) );

    // 经过压缩合并后的css，js移到对应的目录
    gulp.src( develop.temp + '/' + develop.path + '/**' )
        .pipe( gulp.dest( release.base ) );

    // 经过处理后的html移到对应的目录
    gulp.src( develop.temp + '/**/*.html' )
        .pipe( gulp.dest( release.html ) )
})

gulp move
├── dist
    ├── lib
        ├── js
            └── base.min.7cc98ad0.js
        ├── css
            └── base.min.7cc98ad0.js
    ├── html
        └── index.html
└── src
    ├── .temp
        ├── lib
            ├── js
                └── base.min.7cc98ad0.js
            ├── css
                └── base.min.7cc98ad0.js
        ├── html
            └── index.html
    ├── images
        └── 1.jpg
    ├── fonts
        └── ratchicons.ttf
    ├── css
        └── a.css
    ├── scss
        └── a.scss
    ├── js
        └── a.js
    ├── html
        └── index.html

gulp move
[18:44:28] Starting 'move'...
[18:44:28] Finished 'move' after 6.84 ms

3、清除.temp目录

var clean = require('gulp-clean');
gulp.task('clean', function () {
    return gulp.src( [release.path], {read: false} )
        .pipe( clean({force: true}) );
});

gulp clear

[18:44:04] Starting 'clean'...
[18:44:04] Finished 'clean' after 7.55 ms

4、编译scss

var sass = require('gulp-sass');
var replace = require('gulp-replace');
gulp.task('sass', ['src:sass', 'lib:sass'], function (){
})
gulp.task('src:sass', function (){
    gulp.src( develop.base + '/scss/**/*.scss', ['!_*.scss'] )
        .pipe( sass() )
        // 替换掉scss里面的图片引用路径变量
        .pipe( replace(develop.path, release.path) )
        .pipe( gulp.dest(develop.base + '/css') );
})
gulp.task('lib:sass', function (){
    gulp.src( develop.lib + '/scss/**/*.scss', ['!_*.scss'] )
        .pipe( sass() )
        // 替换掉scss里面的图片引用路径变量
        .pipe( replace(develop.path, release.path) )
        .pipe( gulp.dest(develop.lib + '/css') );
})

gulp sass

[18:41:42] Starting 'src:sass'...
[18:41:42] Finished 'src:sass' after 6.62 ms
[18:41:42] Starting 'lib:sass'...
[18:41:42] Finished 'lib:sass' after 1.84 ms
[18:41:42] Starting 'sass'...
[18:41:42] Finished 'sass' after 2.28 μs

5、监听sass

var watch = require('gulp-watch');
gulp.task('watch:sass', function (){
    gulp.run('sass');
    watch('src/**/*.scss', function (e){
        gulp.run('sass');
    })
})

gulp watch:sass

[18:43:15] Starting 'watch:sass'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[18:43:15] Starting 'src:sass'...
[18:43:15] Finished 'src:sass' after 6.8 ms
[18:43:15] Starting 'lib:sass'...
[18:43:15] Finished 'lib:sass' after 2.27 ms
[18:43:15] Starting 'sass'...
[18:43:15] Finished 'sass' after 2.85 μs
[18:43:15] Finished 'watch:sass' after 21 ms

2016-3-8更新

新增压缩image功能插件

var miniImage = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');    // 压缩png格式插件

// 移动资源
gulp.task('move', function (){

    gulp.src( develop.base + '/**/images/**' )
        // 压缩image
        .pipe( miniImage({
            progressive: false,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }) )
        .pipe( gulp.dest( 'dist' ) );

    gulp.src( develop.base + '/**/fonts/**' )
        .pipe( gulp.dest( 'dist' ) );

    // 经过压缩合并后的css，js移到对应的目录
    gulp.src( develop.temp + '/' + develop.path + '/**' )
        .pipe( gulp.dest( release.base ) );

    // 经过处理后的html移到对应的目录
    gulp.src( develop.temp + '/**/*.html' )
        .pipe( gulp.dest( release.html ) )
})

[10:21:20] gulp-imagemin: Minified 8 images (saved 6.18 kB - 60.6%)

注意：var assets = useref.assets();需要加上参数

var assets = useref.assets({searchPath: ['.']});      // 表示静态资源的路径是相对gulpfile.js开始的，否则会找不到资源

2016-3-10更新

新增gulp-plumber插件，当用watch插件监听sass编译时，如果sass编译错误，watch插件就会自动退出，这时就会出现每次出错时都要再次运行watch，而在sass编译时引用这个插件，就会更好的出来报错，并且不会退出

var plumber = require('gulp-plumber');
gulp.task('src:sass', function (){
    gulp.src( develop.base + '/scss/**/*.scss', ['!_*.scss'] )
        .pipe( plumber() )
        .pipe( sass() )
        // 替换掉scss里面的图片引用路径变量
        .pipe( replace(develop.path, release.path) )
        .pipe( gulp.dest(develop.base + '/css') );
})
gulp.task('lib:sass', function (){
    gulp.src( develop.lib + '/scss/**/*.scss', ['!_*.scss'] )
        .pipe( plumber() )
        .pipe( sass() )
        // 替换掉scss里面的图片引用路径变量
        .pipe( replace(develop.path, release.path) )
        .pipe( gulp.dest(develop.lib + '/css') );
})