简单了解gulp

 读完本文可简单了解gulp基本使用。

  gulp提供4个基础API进行调用，只要掌握这4个的使用方式并配合插件便能搭建一套自动化前端开发系统。

  1. gulp.task();//第一个参数为任务名，第二个是一个回调函数

  2. gulp.src('src/a.scss');//此方法参数为目录下指定的文件，并返回提供给下一个插件管道使用

  3. gulp.dest();//参数为输出路径

4. gulp.watch(); 第一个参数为监听的文件，第二个参数为监听文件改变时触发的任务

以上方法参数只做了简单介绍，方法详情请自行查找资料。

  在安装好Node之后,通过在命令行输入npm install gulp下载gulp，输入npm install gulp-sass来下载编译sass的插件，

输入npm install gulp-concat来下载打包插件。

var gulp=require('gulp');//引入gulp,以下两行同理

var sass=require('gulp-sass');

var concat=require('gulp-concat');

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

 console.log(1);//可自行填写需要的逻辑

});//定义一个默认任务，在命令行输入gulp，按下回车键可以看到1被打印

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

 gulp.src('./a.scss').pipe(sass()).pipe(gulp.dest('./a.css'));

});//在命令行输入gulp sass,即可将当前目录下的a.scss文件编译为a.css文件，输出路径为当前路径

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

 gulp.src(['./a.js','b.js']).pipe(concat('c.js')).pipe(gulp.dest('./'));

});//在命令行输入gulp concat命令，即可将当前目录下的a.js和b.js打包为c.js,输出路径为当前路径

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

gulp.watch('./a.scss',['sass']);//自动化监听当前目录下的a.scss文件，一发生变化就执行（上面定义过的）sass任务

gulp.watch('./*.js',['concat']);//自动化监听当前目录下的所有.js文件，一发生变化就执行（上面定义过的）concat任务

});//在命令行输入gulp watcher命令即可开始进行监听