Gulp / Grunt安装配置模板

1.$ npm install -g cnpm --registry=http://registry.npm.taobao.org
安装好nodejs后，在命令行中输入如上指令，安装cnpm,同时让安装默认路径指向淘宝镜像

$npm init
$cnpm install -g bowe
$cnpm install -g yo
$cnpm install -g gulp
$cnpm install --save-dev gulp
$cnpm install -g grunt-cli
$cnpm install grunt --save-dev

2.项目目录结构

3.安装所需的gulp插件

$ cnpm install gulp-imagemin gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify gulp-livereload --save-dev

安装所需的grunt插件

$ cnpm install grunt-htmlhint grunt-contrib-htmlmin grunt-contrib-jshint grunt-contrib-concat grunt-contrib-uglify grunt-contrib-sass grunt-autoprefixer grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-clean grunt-contrib-watch connect-livereload --save-dev

4.编写gulpfile.js文件

var gulp = require('gulp'),
     $ = require('gulp-load-plugins')(),
     del = require('del');

// HTML处理
gulp.task('htmls', function() {
    var htmlSrc = './src/*.html',
        htmlDst = './dist';
    return gulp.src(htmlSrc)
        .pipe(gulp.dest(htmlDst))
        .pipe($.notify({ message: 'Htmls task complete' }));
});

// 样式处理
gulp.task('styles', function () {
    var cssSrc = './src/styles/*.scss',
        cssDst = './dist/styles';
    return gulp.src(cssSrc)
        .pipe($.sass({ style: 'expanded' }))
        .pipe($.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(cssDst))
        .pipe($.rename({ suffix: '.min' }))
        .pipe($.minifyCss())
        .pipe(gulp.dest(cssDst))
        .pipe($.notify({ message: 'Styles task complete' }));
});

// 图片处理
gulp.task('images', function(){
    var imgSrc = './src/images/**/*.{gif,jpeg,jpg,png}',
        imgDst = './dist/images';
    return gulp.src(imgSrc)
        .pipe($.cache($.imagemin({ optimizationLevel: 3, progressive: true, interlaced: true} )))
        .pipe(gulp.dest(imgDst))
        .pipe($.notify({ message: 'Images task complete' }));
})

// js处理
gulp.task('scripts', function () {
    var jsSrc = './src/scripts/*.js',
        jsDst = './dist/scripts';
    return gulp.src(jsSrc)
        .pipe($.jshint())
        .pipe($.jshint.reporter('default'))
        .pipe($.concat('main.js'))
        .pipe(gulp.dest(jsDst))
        .pipe($.rename({ suffix: '.min' }))
        .pipe($.uglify())
        .pipe(gulp.dest(jsDst))
        .pipe($.notify({ message: 'Scripts task complete' }));
});

// 清空图片、样式、js
gulp.task('clean', function() {
    return del(['./dist/styles', './dist/scripts', './dist/images']);
});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('htmls','styles','images','scripts', 'watch');
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
    gulp.watch('./src/*.html', function(event){
        gulp.run('htmls');
    })
    // 监听css
    gulp.watch('./src/styles/*.scss', function(){
        gulp.run('styles');
    });
    // 监听images
    gulp.watch('./src/images/**', function(){
        gulp.run('images');
    });
    // 监听js
    gulp.watch('./src/scripts/*.js', function(){
        gulp.run('scripts');
    });
    // Create LiveReload server
    $.livereload.listen();
    // Watch any files in ./dist/, reload on change
    gulp.watch(['./dist/**/*']).on('change', $.livereload.changed);
});

编写Gruntfile.js文件

module.exports = function(grunt) {
    require('time-grunt')(grunt);
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //html处理
        htmlhint: {
            build: {
                src: ['src/*.html']
            }
        },
        htmlmin: {
            build: {
                files: [{
                    expand: true,
                    cwd: 'src/',
                    src: ['*.html'],
                    dest: 'dist/'
                }]
            }
        },
        // js处理
        jshint: {
            options: {
                curly: true, 
                eqeqeq: true, 
                immed: true, 
                newcap: true, 
                noarg: true, 
                undef: true, 
                boss: false, 
                eqnull: true, 
                browser: true,
                expr: true,
                noempty: true,
                regexp: true,
                devel: true,
                node: true,
                trailing: true
            },
            src: './src/scripts/**/*.js'
        },
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: 'src/scripts/**/*.js',
                dest: 'dist/scripts/main.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                sourceMap: true
            },
            build: {
                src: 'dist/scripts/main.js',
                dest: 'dist/scripts/main.min.js'
            }
        },
        // 样式处理
        sass: {
            build: {
                files: [{
                    expand: true,
                    cwd: 'src/styles/',
                    src: ['*.scss'],
                    dest: 'tmp/',
                    ext: '.css'
                }]
            }
        },
        autoprefixer: {
            build: {
                files: [{
                    expand: true,
                    cwd: 'tmp/',
                    src: ['*.css'],
                    dest: 'tmp/'
                }]
            }
        },
        cssmin: {
            minify: {
                files: [{
                    expand: true,
                    cwd: 'tmp/',
                    src: ['*.css'],
                    dest: './dist/styles/',
                    ext: '.min.css'
                }]
            },
            combine: {
                files: {
                    './dist/styles/main.min.css': ['./dist/styles/*.min.css', '!./dist/styles/main.min.css']
                }
            }
        },
        imagemin: {
            options: {
                optimizationLevel: 3,
                progressive: true,
                interlaced: true
            },
            build: {
                files: [{
                    expand: true,
                    cwd: './src/images/',
                    src: ['*.{jpg,svg,png,gif}'],
                    dest: './dist/images'
                }]
            }
        },
        clean: {
            build: {
                src: ['dist/**/*', 'tmp/**/*'],
                filter: 'isFile'
            }
        },
        watch: {
            options: {
                livereload: true
            },
            htmls: {
                files: ['src/*.html'],
                tasks: ['htmls'],

            },
            scripts: {
                files: ['src/scripts/**/*.js'],
                tasks: ['scripts'],

            },
            styles: {
                files: ['src/styles/**/*.scss'],
                tasks: ['styles'],
            },
            images: {
                files: ['src/images/**/*'],
                tasks: ['images'],

            }

        }
    });
    grunt.registerTask('htmls', ['htmlhint', 'htmlmin']);
    grunt.registerTask('scripts', ['jshint', 'concat', 'uglify']);
    grunt.registerTask('styles', ['sass', 'autoprefixer', 'cssmin']);
    grunt.registerTask('images', ['imagemin']);
    grunt.registerTask('cleans', ['clean']);
    grunt.registerTask('watchs', ['watch']);
    grunt.registerTask('default', ['cleans', 'htmls', 'scripts', 'styles', 'images', 'watchs']);
};

5.安装http-server建立http服务，并在发布环境目录（这里是dist）下运行http-server，默认端口是8080

$ cnpm install http-server -g
$ http-server

6.在项目根目录下执行监控任务 gulp watch 或 grunt watch

7.并在浏览器中输入127.0.0.1:8080。在Chrome浏览器中安装LiveReload插件，点击插件运行（空心变成实心即关联上，修改css、js、html会即时显示到页面中）。