gulp基本使用方法

       gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

1.全局安装 gulp：

$ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。（以上是复制的）。

要进行的所有文件操作都要下载对应的依赖包。

在项目根目录下创建js文件，然后创建b.js和c.js来个文件夹，对这俩个文件进行操作。

b.js

console.log("this is b!!");

c.js

console.log('this is C');

分别下载gulp操作文件的相关依赖： 

npm install gulp-concat

npm install gulp- uglify

npm install gulp- rename

npm install gulp- dev

引入到gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');    //合并文件
var uglify = require('gulp-uglify');    //压缩代码
var rename = require('gulp-rename');    //重命名
var  del = require('del');              //删除文件

继续操作gulpfile.js文件

var gulp = require('gulp');
var concat = require('gulp-concat');    //合并文件
var uglify = require('gulp-uglify');    //压缩代码
var rename = require('gulp-rename');    //重命名
var  del = require('del');              //删除文件

gulp.task('min', function() {
    // 将你的默认的任务代码放在这

     gulp.src('js/*.js')                //要操作文件的路径 表示js文件下的所有js文件b.js和c.js
         .pipe(concat('all.js'))        //合并后的文件名
         .pipe(gulp.dest('dist/js'))    //合并后文件的存放路径

         .pipe(uglify())               // 文件压缩
         .pipe(rename('all.min.js'))   //压缩后文件名称
         .pipe(gulp.dest('minJs'));    //压缩后文件的存放路径

});
gulp.task('default', ['min']);

合并b.js与c.js：  在cmd运行gulp 执行tas的默认事件里的min

执行成功后项目里多了俩个文件夹dist和minJs. 说明文件合并压缩成功了。

监听文件操作：   在 gulpfile.js里加入

gulp.task('watch', function () {     //监听文件是否发生变化
          gulp.watch('js/c.js', function () {   //接听c.js的变化
              console.log('c.js have change');   //c.js发生改变时输出c.js have change
          });
});

gulp.task('default', ['min', 'watch']);

再次运行gulp, 修改c.js保存一下

监听文件成功。  

删除文件 ： 在 gulpfile.js里加入 

gulp.task('clean', function() {
    return del('js/c.js');     //删除的文件
});

gulp.task('default', ['min', 'watch','clean']);

再次运行gulp  c.js被删除。

以上为gulp的最基本操作，项目中以此为扩展，应用到实际项目中。希望对你有一点点用，不枉我啰

里啰嗦的写了这么多。