最近忙來(lái)忙去，感覺一直都是一個(gè)頹廢狀態(tài)烛缔，決定還是整理整理馏段，先開個(gè)頭，立個(gè)flag力穗。
一些光寫靜態(tài)頁(yè)面的小項(xiàng)目，感覺現(xiàn)在菜雞的我應(yīng)該可以嘗試一下自動(dòng)化了气嫁，腳手架什么的当窗，感覺這么小的東西就決定是你了gulp!
參考文章
https://segmentfault.com/a/1190000007715656
妄想實(shí)現(xiàn)功能的梳理
- 文件目錄的自動(dòng)創(chuàng)建
- html的實(shí)時(shí)預(yù)覽
- scss的自動(dòng)編譯js
- 圖片的自動(dòng)壓縮，以及雪碧圖的自動(dòng)合成
- 代碼自動(dòng)壓縮
- css3屬性前綴自動(dòng)補(bǔ)全
- 分為
開發(fā)和上線兩個(gè)版本
照搬demo寸宵，做點(diǎn)小改動(dòng)
- 安裝
nodeJS---->node官網(wǎng) - 安裝
gulp---->$ npm install -g gulp - 創(chuàng)建一個(gè)新的文件夾 我的叫
Hathaway,在根目錄執(zhí)行npm init一路回車（生成package.json） - 在項(xiàng)目根目錄安裝依賴
$ npm install --save-dev gulp - 創(chuàng)建
gulpfile.js
開始安裝第一個(gè)插件fs-extra
- 作用于初始化目錄結(jié)構(gòu)
npm install --save fs-extra
安裝好后崖面，在gulpfile,js輸入下列內(nèi)容
var gulp = require('gulp');
// 引入組件
var path = require('path'),
fse = require('fs-extra'); //初始化目錄插件
// 獲取當(dāng)前文件路徑
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方法創(chuàng)建文件
fse.createFileSync(path.join(PWD + '/' + item));
})
//往文件里寫內(nèi)容
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')
// 基于一些配置項(xiàng) 運(yùn)行sass()命令
.pipe(sass({
errLogToConsole: true,
outputStyle: 'expanded'
}).on('error', sass.logError))
// 輸出css
.pipe(gulp.dest('dist/css'));
});
自動(dòng)補(bǔ)全前綴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)
})
拖延癥的遠(yuǎn)古前端準(zhǔn)備向新世紀(jì)的大陸進(jìn)發(fā)了
