取代grunt,更简单的前端脚手架

GULP简单使用

以前都是使用grunt来搭建前端开发环境，自从又一次看到了gulp,这种简单配置，管道输出的方式深深的打动了我，从此将项目都改用gulp搭建

关于gulp的介绍我就不多说了，我们直接来看看怎么使用他：

一、node环境搭建

首先你的项目中需要安装node环境，使用npm管理相关模块，作为前端工程师,npm一定是陌生的，如没有安装，可以在node中下载安装，并进行环境变量配置。

二、安装gulp

在控制台中输入:

sudo npm install -g gulp  

如果是windows 操作系统 直接输入

npm install -g gulp  

这时候gulp模块就已经进入你的系统中了。

三、安装gulp到项目中去

我们在第二步中，将gulp安装到了本机，可是我们需要在某一个项目里面使用gulp，还需要将gulp安装到相应的项目中去。

可以CD到项目项目跟目录下去 ，执行。

npm install  gulp  

这时候你的项目根目录会自动创建node文件夹以及安装的相应模块，如图

npm install -g gulp  

四、安装相应插件

安装插件的方法和安装gulp方法是一样的，你需要在 npm仓库中寻找你要的插件，

执行：

npm install 插件名 --save

由于我的项目需要，我安装了

gulp-concat                  //文件合并

gulp-imagemin             //图片压缩
gulp-jshint                    //js代码检测
gulp-less                     //less编译
gulp-minify-css            //css压缩
gulp-rename               //重命名
gulp-uglify                  //js压缩

这些插件

如果想和我使用同样的插件，执行

npm install gulp-concat gulp-imagemin gulp-jshint  gulp-less  gulp-minify-css  gulp-rename  gulp-uglify   --save

安装后，你的node文件夹将会是这样：

五、编写gulp文件

在你的项目目录上，编写gulpfile.js文件

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


//引入组件
var minifyCss = require('gulp-minify-css');  //css压缩
var concat = require('gulp-concat');           //js合并
var jshint = require('gulp-jshint');           //js规范验证
var uglify = require('gulp-uglify');           //js压缩
var less = require('gulp-less');               // less编译
var rename = require('gulp-rename');          //文件名命名
var imagemin = require('gulp-imagemin');     //图片压缩


//less处理 css压缩
gulp.task('less', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'));
});

//css压缩
gulp.task('css-min', function () {
    gulp.src('./dist/css/dream.css')
        .pipe(minifyCss())
        .pipe(rename("dream.min.css"))
        .pipe(gulp.dest('./dist/css'));
});

//脚本检查
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')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

// 图片处理
gulp.task('img', function () {
    gulp.src('src/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'));
});

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

    //监听less变化
    gulp.watch('src/less/*.less', function () {
        gulp.run('less');
    });

    //监听css变化
    gulp.watch('dist/css/dream.css', function () {
        gulp.run('css-min');
    });

    //监听js变化
    gulp.watch('src/js/*.js', function () {
        gulp.run('lint', 'scripts');
    });

    //监听图片变化
    gulp.watch('src/img/**/*', function () {
        gulp.run('img');
    });

})

然后，在控制台 输入gulp 他会自动寻找task为default的任务，我定义这个任务是监听src各个目录下文件的变化，一旦这些文件发生变化，变执行对应的task，比如

 //监听js变化
    gulp.watch('src/js/*.js', function () {
        gulp.run('lint', 'scripts');
    });

一旦src/js中任意js文件 改变，我就会执行

<pre name="code" class="javascript">//脚本检查
gulp.task('lint', function () {
    gulp.src('src/js/*.js')
        .pipe(jshint())                                  //js文件规范 
        .pipe(jshint.reporter('default'));              
});

//js处理
gulp.task('scripts', function () { 
    gulp.src('src/js/*.js')                             
        .pipe(concat('all.js'))                             //合并文件
        .pipe(gulp.dest('./dist/js'))                     //输出到路径
        .pipe(rename("all.min.js"))                       //重命名文件
        .pipe(uglify())                                   //压缩
        .pipe(gulp.dest('./dist/js'));
});

是不是很简单呢，

还有很多有意思的组件可以在 npm上的gulp插件 上查看