Gulp 的简单使用（原创）

1.安装nodejs

   安装省略

   npm的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

 

2.cmd（npm）- 全局安装gulp  

 npm install -g gulp

 

3.cmd（npm）- 进入项目路径，执行npm init ，生成package.json文件

 npm init -y

 

4.cmd（npm）- 在项目目录下开始本地安装gulp各种插件

 npm install gulp-jshint --save-dev  

 gulp-concat、gulp-uglify、gulp-rename ..等.(--save-dev 是可以省掉你手动修改package.json文件的步骤，正常情况下得连同版本号手动将他们添加到模块配置文件)package.json中的依赖里

 

5.在项目目录下新建gulpfile.js文件，gulp有五种方法：task，run，watch，src，和dest.

gulpfile.js

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

var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var minify_css = require('gulp-minify-css');

//创建任务
gulp.task('hint',function(){
　　return gulp.src(['a.js', 'b.js', 'c.js'])
　　.pipe(jshint())
　　.pipe(jshint.reporter('default'));
});

gulp.task('script', function () {
　　return gulp.src(['a.js', 'b.js', 'c.js'])
　　　　.pipe(concat('ABC.js'))
　　　　.pipe(gulp.dest('application'))
　　　　.pipe(uglify())
　　　　.pipe(rename({suffix: '.min'}))
　　　　.pipe(gulp.dest('application'));
});

gulp.task('css1', function () {
　　return gulp.src('dist/css/d.css')
　　　　.pipe(minify_css())
　　　　.pipe(rename({suffix: '.min'}))
　　　　.pipe(gulp.dest('application'));
});

gulp.task('css2', function () {
　　return gulp.src(['dist/css/e.css', 'dist/css/f.css'])
　　　　.pipe(concat('EF.css'))
　　　　.pipe(gulp.dest('application'))
　　　　.pipe(minify_css())
　　　　.pipe(rename({suffix: '.min'}))
　　　　.pipe(gulp.dest('application'));
});

gulp.task('watch', function () {
　　gulp.watch(['a.js', 'b.js', 'c.js'], ['script']);
　　gulp.watch('dist/css/d.css', ['css1']);
　　gulp.watch(['dist/css/e.css', 'dist/css/f.css'], ['css2']);
});

gulp.task('clean', function () {
　　return gulp.src('application', {read: false})
　　.pipe(clean());
});

gulp.task('default', ['clean'], function () {
　　gulp.run('hint','script', 'css1', 'css2', 'watch');
});

　　

6.cmd（npm）- 执行任务 

gulp default