Gulp經常使用前端流程自動化配置

前言

近期的項目所有由Grunt + LESS 轉向改用Gulp + SASS 進行前端開發，也就奔着Gulp那比較好用的自定義函數而來的。

1、package.json文件配置以下：

 

{
    "name": "your app's name",
    "version": "0.1.0",
    "description": "your app's description",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
        "your app's keywords"
    ],
    "author": "your name",
    "license": "MIT",
    "repository": {
        "type": "git",
        "url": "your git rep address"
    },
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^3.1.0",
        "gulp-clean": "^0.3.2",
        "gulp-concat": "^2.6.0",
        "gulp-jshint": "^2.0.0",
        "gulp-minify-css": "^1.2.4",
        "gulp-rename": "^1.2.2",
        "gulp-ruby-sass": "^2.0.6",
        "gulp-uglify": "^1.5.3",
        "jshint": "^2.9.1"
    }
}

 

2、gulpfile.js文件配置以下：

// 引入 gulp
var gulp = require('gulp');
var connect = require('gulp-connect');

// 引入組件
var jshint = require('gulp-jshint'),            // 檢查腳本
    sass = require('gulp-ruby-sass'),           // 編譯Sass
    minifycss = require('gulp-minify-css'),     // css壓縮
    autoprefixer = require('gulp-autoprefixer'),// 自動添加css3前綴
    concat = require('gulp-concat'),            // 合併
    uglify = require('gulp-uglify'),            // js壓縮
    clean = require('gulp-clean'),              // 清空文件夾
    rename = require('gulp-rename');            // 重命名


// 檢查腳本
gulp.task('jshint', function () {
    var jsSrc = './src/js/*.js',
        jsDst = './dist/js';
    gulp.src(jsSrc)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'));
});

// 編譯Sass
gulp.task('sass', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';
    return sass(cssSrc, { 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));
});

// 壓縮js文件
gulp.task('jsuglify', function () {
    var jsSrc = './src/js/*.js',
        jsDst = './dist/js';
    gulp.src(jsSrc)
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});

// 合併,壓縮js文件
gulp.task('jsconcat', function () {
    var jsSrc = './src/js/*.js',
        jsDst = './dist/js';
    gulp.src(jsSrc)
        .pipe(concat('all.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});

// 清空樣式、js
gulp.task('clean', function () {
    gulp.src(['./dist/css', './dist/js'], { read: false })
        .pipe(clean());
});

// 使用connect啓動一個Web服務器 http://localhost:1988/ 或者查看本身電腦本地的IP
gulp.task('webserver', function () {
　　connect.server({
　　  livereload: true,
　　　 port: 1988
　　});
});

// 默認任務
gulp.task('default', function () {
    gulp.run('jshint', 'sass', 'jsuglify', 'webserver');

    // 監聽文件變化
    var jsSrc = './src/js/*.js',
        cssSrc = './src/scss/*.scss';
    gulp.watch([jsSrc, cssSrc], function () {
        gulp.run('jshint', 'sass', 'jsuglify');
    });
});

3、.jshintrc文件配置以下：

{
    "globals": {
        "jasmine": false,
        "spyOn": false,
        "it": false,
        "console": false,
        "describe": false,
        "expect": false,
        "beforeEach": false,
        "waits": false,
        "waitsFor": false,
        "runs": false
    },

    "node" : true,
    "es5" : true,
    "browser" : true,

    "boss" : false,
    "curly": false,
    "debug": false,
    "devel": false,
    "eqeqeq": true,
    "evil": true,
    "forin": false,
    "immed": true,
    "laxbreak": false,
    "newcap": true,
    "noarg": true,
    "noempty": false,
    "nonew": false,
    "nomen": false,
    "onevar": true,
    "plusplus": false,
    "regexp": false,
    "undef": true,
    "sub": true,
    "strict": false,
    "white": true,
    "unused": true
}