gulp构建

gulp 的所有配置代码都写在 gulpfile.js 文件。

一、新建一个 gulpfile.js 文件

二、在 gulpfile.js 中编写代码

// 获取 gulp
var gulp = require('gulp')

三、获取 gulp-uglify 组件
var uglify = require('gulp-uglify')
gulp.task('script', function() {

// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
    .pipe(uglify())
// 3. 另存压缩后的文件
    .pipe(gulp.dest('dist/js'))

})

检测代码修改自动执行任务

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

// 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])

})

使用 gulp.task('default', fn) 定义默认任务

gulp.task('default', ['script', 'auto']);

压缩css gulp-minify-css

压缩图片gulp-imagemin

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var gulpCC = require("gulp-closurecompiler");
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var eslint = require('gulp-eslint');
var autoprefixer = require('gulp-autoprefixer');
var pump = require('pump');

gulp.task('default', ['dev']);

gulp.task('dev', function () {
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch('src/css/*.scss', ['css']);
    gulp.watch('src/img/*.*', ['img']);
});

gulp.task('js', function() {
// gulp.task('js', ['jslint'], function() {
    // without pump
    // return gulp.src('src/js/*.js')
    //     // .pipe(gulpCC())
    //     .pipe(uglify())
    //     .pipe(gulp.dest('static/js'));
    // with pump
    pump([
        gulp.src('src/js/*.js'),
        sourcemaps.init(),
        uglify(),
        sourcemaps.write(),
        gulp.dest('static/js')
    ]);
});

gulp.task('css', function() {
    return gulp.src('src/css/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 10 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('static/css'));
});

gulp.task('img', function () {
    return gulp.src('src/img/*.*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('static/img'))
});

gulp.task('jslint', function () {
    return gulp.src(['src/js/*.js','!node_modules/**'])
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});