npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

project(项目名称)

|–.git 通过git管理项目会生成这个文件夹

|–node_modules 组件目录

|–dist 发布环境

    |–css 样式文件(style.css style.min.css)

    |–images 图片文件(压缩图片)

    |–js js文件(main.js main.min.js)

    |–index.html 静态文件(压缩html)

|–src 生产环境

    |–sass sass文件

    |–images 图片文件

    |–js js文件

    |–index.html 静态文件

|–.jshintrc jshint配置文件

|–gulpfile.js gulp任务文件

// 引入 gulp及组件

var gulp    = require('gulp'),                 //基础库

    imagemin = require('gulp-imagemin'),       //图片压缩

    sass = require('gulp-ruby-sass'),          //sass

    minifycss = require('gulp-minify-css'),    //css压缩

    jshint = require('gulp-jshint'),           //js检查

    uglify  = require('gulp-uglify'),          //js压缩

    rename = require('gulp-rename'),           //重命名

    concat  = require('gulp-concat'),          //合并文件

    clean = require('gulp-clean'),             //清空文件夹

    tinylr = require('tiny-lr'),               //livereload

    server = tinylr(),

    port = ,

    livereload = require('gulp-livereload');   //livereload

// HTML处理

gulp.task('html', function() {

    var htmlSrc = './src/*.html',

        htmlDst = './dist/';

    gulp.src(htmlSrc)

        .pipe(livereload(server))

        .pipe(gulp.dest(htmlDst))

});

// 样式处理

gulp.task('css', function () {

    var cssSrc = './src/scss/*.scss',

        cssDst = './dist/css';

    gulp.src(cssSrc)

        .pipe(sass({ style: 'expanded'}))

        .pipe(gulp.dest(cssDst))

        .pipe(rename({ suffix: '.min' }))

        .pipe(minifycss())

        .pipe(livereload(server))

        .pipe(gulp.dest(cssDst));

});

// 图片处理

gulp.task('images', function(){

    var imgSrc = './src/images/**/*',

        imgDst = './dist/images';

    gulp.src(imgSrc)

        .pipe(imagemin())

        .pipe(livereload(server))

        .pipe(gulp.dest(imgDst));

})

// js处理

gulp.task('js', function () {

    var jsSrc = './src/js/*.js',

        jsDst ='./dist/js';

    gulp.src(jsSrc)

        .pipe(jshint('.jshintrc'))

        .pipe(jshint.reporter('default'))

        .pipe(concat('main.js'))

        .pipe(gulp.dest(jsDst))

        .pipe(rename({ suffix: '.min' }))

        .pipe(uglify())

        .pipe(livereload(server))

        .pipe(gulp.dest(jsDst));

});

// 清空图片、样式、js

gulp.task('clean', function() {

    gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})

        .pipe(clean());

});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp

gulp.task('default', ['clean'], function(){

    gulp.start('html','css','images','js');

});

// 监听任务 运行语句 gulp watch

gulp.task('watch',function(){

    server.listen(port, function(err){

        if (err) {

            return console.log(err);

        }

        // 监听html

        gulp.watch('./src/*.html', function(event){

            gulp.run('html');

        })

        // 监听css

        gulp.watch('./src/scss/*.scss', function(){

            gulp.run('css');

        });

        // 监听images

        gulp.watch('./src/images/**/*', function(){

            gulp.run('images');

        });

        // 监听js

        gulp.watch('./src/js/*.js', function(){

            gulp.run('js');

        });

    });

});