常用项目结构和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"
  }
}