项目结构:
gulpfile.js:
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),//网页自动刷新
rename = require('gulp-rename'),//重命名
cssmin = require('gulp-cssmin'),//压缩css
iconfont = require('gulp-iconfont'),//svg转ttf字体
iconfontCss = require('gulp-iconfont-css'),//svg转ttf字体
less = require('gulp-less'),//编译less
autoprefixer = require('gulp-autoprefixer');//添加css3前缀
var paths = {
HTML:'mockup/*.html',
LESS:'less/**/*.less',
JS:'js/*.js',
source: ['less/private/*.less'],
svg: 'svg/*.svg',
classPrev: 'icon',
path: 'less/component/_font.less',
targetPath: '../less/component/font.less',
fontName: 'micon',
fontPath: 'font/',
watchcss: [
'less/*.less',
'less/**/*.less'
],
watchMockup: [
''
]
};
gulp.task('runless', function() {
return gulp.src(paths.source)
.pipe(less())
.pipe(autoprefixer())
.pipe(gulp.dest('css/main/'))
.pipe(browserSync.stream())
});
gulp.task('cssmin',['runless'],function() {
return gulp.src('css/main/*.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('css/dist/'))
.pipe(browserSync.stream())
});
gulp.task("jswatch", function() {
return gulp.src(paths.JS)
.pipe(browserSync.stream());
})
gulp.task("html", function() {
return gulp.src(paths.HTML)
.pipe(browserSync.stream());
})
gulp.task('iconfont', function() {
gulp.src([paths.svg])
.pipe(iconfontCss({
cssClass : paths.classPrev,
path: paths.path,
targetPath: paths.targetPath,
fontName: paths.fontName,
fontPath: paths.fontPath
}))
.pipe(iconfont({
fontName: paths.fontName,
normalize: true,
fontHeight: 1001,
formats: ['ttf']
}))
.pipe(gulp.dest(paths.fontPath));
});
// gulp.task('watch', function() {
// return gulp.watch(paths.watchcss, ['runless', 'cssmin']);
// });
gulp.task("serve", ["cssmin", "jswatch", "html"], function() {
browserSync.init({
server : "./"
});
gulp.watch(paths.LESS, ["cssmin"]);
gulp.watch(paths.JS, ["js-watch"]);
gulp.watch(paths.HTML, ["html"]);
gulp.watch(paths.HTML).on("change", function() {
browserSync.reload;
});
});
package.json:
{
"name": "js",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline --content-base --env=dev --publicPath=dev ."
},
"author": "",
"license": "ISC",
"dependencies": {
"history": "^4.2.0"
},
"devDependencies": {
"browser-sync": "^2.18.8",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.23.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-connect": "^5.0.0",
"gulp-cssmin": "^0.1.7",
"gulp-iconfont": "^8.0.1",
"gulp-iconfont-css": "^2.1.0",
"gulp-less": "^3.1.0",
"gulp-rename": "^1.2.2",
"http-server": "^0.8.5",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.16.3"
}
}