Gulp常用前端流程自动化配置

前言

近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的。

一、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"
    }
}

 

二、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');
    });
});

三、.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
}

 

posted @ 2016-06-24 09:15  Fast Mover  阅读(...)  评论(...编辑  收藏
友情链接: 泡妞秘籍 | A4纸尺寸 | 卡通头像 | +申请友情链接