Gulp使用记录

发布时间: 2017-03-07

什么是Gulp

BalaBala...

Gulp安装

1. 安装NodeJS环境(如果已经安装则忽略该一步)。NodeJS下载地址

2. 全局安装gulp(如果已经全局安装,则可忽略这一部分)

npm install gulp -g

3. 本地(项目)安装gulp。(得先进入项目目录)

npm install --save-dev gulp

4. 项目根目录下建一个gulpfile.js文件(下方会有该文件内容)。

Gulp插件安装使用

常用插件:

1. gulp-concat、gulp-rename

2. gulp-minify-css、gulp-less

3. gulp-jshint、jshint、gulp-uglify

4. gulp-imagemin、gulp.spritesmith

5. browser-sync

插件安装:

npm install --save-dev gulp-concat gulp-rename gulp-minify-css jshint gulp-jshint gulp-uglify gulp-imagemin gulp.spritesmith browser-sync

gulpfile.js模板

const gulp = require('gulp');

const concat = require('gulp-concat');
const rename = require('gulp-rename');

const minify = require('gulp-minify-css');
// const less = require('gulp-less');

const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');

const imagemin = require('gulp-imagemin');
const sprites = require('gulp.spritesmith');

const bs = require('browser-sync').create();

// 定义css文件的路径
const cssFile = './src/css/**/*.css';
// 定义js文件的路径
const jsFile = './src/js/**/*.js';
// 定义image文件的路径
const imgFile = './src/images/**/*';


// CSS样式
gulp.task('style', function() {
    return gulp.src(cssFile)
        .pipe(concat('style.css'))
        .pipe(gulp.dest('./dist/css/'))
        .pipe(minify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/css/'))
        .pipe(bs.stream())
});

// JS
gulp.task('script', function() {
    return gulp.src(jsFile)
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('common.js'))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(bs.stream())
})

// 图片
gulp.task('image', function() {
    return gulp.src(imgFile)
        .pipe(imagemin({
            optimizationLevel: 1
        }))
        .pipe(gulp.dest('./dist/images/'))
});

// 雪碧图生成
gulp.task('sprites', function () {
    return gulp.src('./src/images/icon/**/*.png')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: '../images/sprites.png',//保存合并后图片的地址
            cssName: 'sprites.css',//保存合并后对于css样式的地址
            padding:5,//合并时两个图片的间距
            algorithm: 'top-down',//top-down、left-right、diagonal、alt-diagonal、binary-tree
            cssTemplate:"./handlebarsStr.css"
        }))
        .pipe(gulp.dest('./dist/css'));
});

// 处理雪碧图
gulp.task('sprites-css', function() {
    return gulp.src('./dist/css/sprites.css')
        .pipe(minify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/css/'))
});

// 默认
gulp.task('default', ['style', 'script', 'image'], function() {

    bs.init({
        server: {
            baseDir: './'
        },
        open: false
    });

    // 监视文件
    gulp.watch(cssFile, ['style']);
    gulp.watch(jsFile, ['script']);
    gulp.watch(imgFile, ['image']);
    gulp.watch("./*.html").on('change', browserSync.reload);

});

目录结构(demo04位项目目录):

dir

其中handlebarsStr.css为雪碧图生成css样式的模板,文件内容为下:

{{#sprites}}
.icon-{{name}}{
    background-image: url("{{escaped_image}}");
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};
}
{{/sprites}}