gulp入门

1 安装 Node

2 创建项目

创建项目文件夹

进入项目文件夹

初始化项目

使用npm命令:npm init,根据提示完成。

3 安装 Gulp

进入项目文件夹,使用Node的包管理命令npm进行安装.

全局安装

npm install -g gulp

项目依赖中安装

npm install –save-dev gulp

创建Gulp配置文件

在项目根目录新建配置文件gulpfile.js

设置配置信息

以常见的Gulp插件为例,如下：
js代码校验(gulp-jshint)
合并js文件(gulp-concat)
压缩js代码(gulp-uglify)
sass的编译(gulp-sass)
less的编译(gulp-less)
压缩css(gulp-minify-css)
重命名(gulp-rename)
这些插件的安装命令如下:
npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename –save-dev

4 gulpfile.js中的内容

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

// 引入组件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');

// 检查js脚本
gulp.task('lint', function() {
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合并,压缩js文件
gulp.task('scripts', function() {
    gulp.src('./src/js/*.js')
        //合并js文件
        .pipe(concat('all.js'))
        //给文件添加.min后缀
        .pipe(rename({ suffix: '.min' }))
        //压缩脚本文件
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

// 编译sass
gulp.task('sass', function() {
    gulp.src('./src/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 编译less
gulp.task('sass', function() {
    gulp.src('./src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

// 压缩css
gulp.task('style', function() {
    gulp.src('./src/css/*.css')
        .pipe(gulp.dest('./dist/style'))
        .pipe(rename('all.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('./dist/style'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./src/js/*.js', function(){
        gulp.run('lint', 'scripts');
    });
    gulp.watch('./src/sass/*.scss', function(){
        gulp.run('sass');
    });
    gulp.watch('./src/less/*.less', function(){
        gulp.run('less');
    });
    gulp.watch('./src/css/*.css', function(){
        gulp.run('style');
    });
});