常用项目结构和gulp配置

项目结构： 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" } }