gulp整理

最近忙来忙去，感觉一直都是一个颓废状态，决定还是整理整理，先开个头，立个flag。
一些光写静态页面的小项目，感觉现在菜鸡的我应该可以尝试一下自动化了，脚手架什么的，感觉这么小的东西就决定是你了gulp!
参考文章
https://segmentfault.com/a/1190000007715656

妄想实现功能的梳理

1. 文件目录的自动创建
2. html的实时预览
3. scss的自动编译js
4. 图片的自动压缩，以及雪碧图的自动合成
5. 代码自动压缩
6. css3属性前缀自动补全
7. 分为开发 和上线两个版本

照搬demo，做点小改动

1. 安装nodeJS---->node官网
2. 安装gulp---->$ npm install -g gulp
3. 创建一个新的文件夹 我的叫Hathaway,在根目录执行npm init 一路回车（生成package.json）
4. 在项目根目录安装依赖$ npm install --save-dev gulp
5. 创建gulpfile.js

开始安装第一个插件fs-extra

• 作用于初始化目录结构
• npm install --save fs-extra

安装好后，在gulpfile,js输入下列内容

var gulp = require('gulp');

// 引入组件
var path = require('path'),
    fse = require('fs-extra'); //初始化目录插件

// 获取当前文件路径
var PWD = process.env.PWD || process.cwd(); //兼容Windows

gulp.task('init', function() {
    var dirs = ['dist', 'dist/html', 'dist/css', 'dist/images', 'dist/js', 'src', 'src/sass', 'src/js', 'src/images', 'src/sprite', 'doc', 'doc/documents', 'doc/psd'];
    dirs.forEach(function(item, index) {
        // 使用mkdirSync方法新建文件夹
        fse.mkdirSync(path.join(PWD + '/' + item));
    })

    var files = ['src/index.html'];
    files.forEach(function(item,index){
      // 使用 createFileSync方法创建文件
      fse.createFileSync(path.join(PWD + '/' + item));
    })
    //往文件里写内容
    fse.writeFileSync(path.join(PWD + '/src/sass/style.scss'), '@charset "utf-8;"');
})

sass编译gulp-sass

• npm install --save gulp-sass

gulp.task('sass', function () {
  return gulp
    // 在src/sass目录下匹配所有的.scss文件
    .src('src/sass/**/*.scss')

    // 基于一些配置项 运行sass()命令
    .pipe(sass({
        errLogToConsole: true,
        outputStyle: 'expanded'
    }).on('error', sass.logError))

    // 输出css
    .pipe(gulp.dest('dist/css'));
});

自动补全前缀autoprefixer

• npm install --save gulp-sass

gulp.task('autoprefixer', function () {
  return gulp.src('dist/css/**/*.css')
    .pipe(autoprefix({
        browsers: ['ios 5','android 2.3'],
        cascade: false
    }))
    .pipe(gulp.dest('dist/css'));
});

雪碧图的支持gulp.spritesmith-multi

• npm install --save gulp.spritesmith-multi

gulp.task('sprite', function () {
  return gulp.src('src/sprite/**/*.png')
    .pipe(spritesmith())
    .on('error', function (err) {
      console.log(err)
    })
    .pipe(gulp.dest('dist/images'))
})

把不同文件放到不同文件夹merge-stream
合并文件gulp-concat

• npm install --save merge-stream
• npm install --save gulp-concat

gulp.task('sprite', function() {
    var spriteData = gulp.src('src/sprite/**/*.png')
        .pipe(spritesmith({
            spritesmith: function(options, sprite) {
                options.cssName = sprite + '.scss';
                options.cssSpritesheetName = sprite;
            }
        }));

    var imgStream = spriteData.img
        .pipe(gulp.dest('dist/images'))

    var cssStream = spriteData.css
        .pipe(concat('sprite.scss'))
        .pipe(gulp.dest('src/sass'))

    // Return a merged stream to handle both `end` events
    return merge(imgStream, cssStream)
})

拖延症的远古前端准备向新世纪的大陆进发了