Gulp 配置文件以及注意点

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-sass'),                //sass
    sourcemaps = require('gulp-sourcemaps'),    //生成sass行数
    cssmin = require('gulp-clean-css'),         //压缩css
    cssver = require('gulp-make-css-url-version'),
    autoprefixer = require('gulp-autoprefixer'),//补全前缀
    jshint = require('gulp-jshint'),            //js代码校验
    rename = require('gulp-rename'),            //文件重命名
    uglify = require('gulp-uglify'),            //压缩js代码
    concat = require('gulp-concat'),            //合并js文件
    notify = require('gulp-notify'),            //更改提醒
    browserSync = require('browser-sync'),      // 浏览器自动刷新
    reload = browserSync.reload;

// Styles任务
gulp.task('styles', function () {
    //编译sass
    return gulp.src('dev/scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssver())
        .pipe(cssmin({
            keepSpecialComments: '*'
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write("maps"))
        .pipe(gulp.dest('assets/styles'))
        .pipe(notify({message: 'Styles task complete'}));
});

// Scripts任务
gulp.task('scripts', function () {
    //js代码校验
    return gulp.src('dev/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        //js代码合并
        .pipe(concat('app.js'))
        //给文件添加.min后缀
        .pipe(rename({suffix: '.min'}))
        //压缩脚本文件
        .pipe(uglify())
        //输出压缩文件到指定目录
        .pipe(gulp.dest('assets/scripts'))
        //提醒任务完成
        .pipe(notify({message: 'Scripts task complete'}));
});

// 监视文件改动并重新载入
gulp.task('serve', function () {
    browserSync({
        server: {
            baseDir: './'
        }
    });
    gulp.watch(['assets/*', 'assets/**/*', 'assets/**/**/*'], {cwd: './'}, reload);
});

// Default task
gulp.task('default', function () {
    gulp.start('styles', 'scripts', 'serve', 'watch');
});

// Watch
gulp.task('watch', function () {
    // Watch .scss files
    gulp.watch(['dev/scss/*', 'dev/scss/**/*'], ['styles']);
    // Watch .js files
    gulp.watch('dev/js/*.js', ['scripts']);
});

 

文件目录：

assets

　　scripts

　　styles

　　html

dev

　　scss

　　js