最近忙来忙去，感觉一直都是一个颓废状态，决定还是整理整理，先开个头，立个flag。
一些光写静态页面的小项目，感觉现在菜鸡的我应该可以尝试一下自动化了，脚手架什么的，感觉这么小的东西就决定是你了gulp!
参考文章
https://segmentfault.com/a/1190000007715656
妄想实现功能的梳理
- 文件目录的自动创建
- html的实时预览
- scss的自动编译js
- 图片的自动压缩，以及雪碧图的自动合成
- 代码自动压缩
- css3属性前缀自动补全
- 分为
开发和上线两个版本
照搬demo，做点小改动
- 安装
nodeJS---->node官网 - 安装
gulp---->$ npm install -g gulp - 创建一个新的文件夹 我的叫
Hathaway,在根目录执行npm init一路回车（生成package.json） - 在项目根目录安装依赖
$ npm install --save-dev gulp - 创建
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-streamnpm 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)
})
拖延症的远古前端准备向新世纪的大陆进发了
