gulp.js 的安装以及使用

首先：电脑需要安装 Node.js 一个大绿色的安装按钮，点击就可以。

但还是推荐，点击download选中一款适合电脑配置的版本。

Node安装过程，就是下一步 and 下一步~~

测试手否安装成功：

node -v

现在开始安装 gulp.js

全局安装gulp
npm install -g gulp

安装好后，把gulp安装到本地
npm install --save-dev  gulp

现在可以用安装本地的方法分别把如下插件安装上：

    编译Sass (gulp-ruby-sass)与[gulp-sass]都可以
    Autoprefixer (gulp-autoprefixer)
    缩小化(minify)CSS (gulp-minify-css)
    JSHint (gulp-jshint)
    拼接 (gulp-concat)
    丑化(Uglify) (gulp-uglify)
    图片压缩 (gulp-imagemin)
    即时重整(LiveReload) (gulp-livereload)
    清理档案 (gulp-clean)
    图片快取，只有更改过得图片会进行压缩 (gulp-cache)
    更动通知 (gulp-notify)

然后再跟目录内创建一个gulpfile.js的文件：

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

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

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

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

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

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

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

//后补，更加详细的注视
// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var uglify = require('gulp-uglify');  //压缩js
var concat = require('gulp-concat');  //合并js
var server = require('gulp-server-livereload');  //服务自动刷新
var minifyCss = require('gulp-minify-css'); //压缩CSS
var sourcemaps = require('gulp-sourcemaps');

//不用配置只要服务启动，事后的所有操作都会自动刷新
gulp.task('webserver', function() {
  gulp.src('.')
    .pipe(server({
      livereload: true,
      open: true,
      directoryListing: true
      //defaultFile: 'gulp.html'
    }));
});

// 合并/压缩文件js
gulp.task('uglify-concat', function() { //合并/压缩
  return gulp.src('js/*.js')   //引入Js路径
    .pipe(uglify())         //压缩Js
    .pipe(concat('all.js'))  //合并Js
    .pipe(gulp.dest('dist'));  //压缩Js后生成的路径
});

//压缩CSS
gulp.task('minify-css', function() {
  return gulp.src('./style/*.css')
    //.pipe(sourcemaps.init())  注视的这两个可以显示样式下的sourcemaps
    .pipe(minifyCss())
    //.pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('minify-css');    //run方法已经被淘汰了，可以尝试用继承的方式，或者用watch

    // 监听文件变化
    gulp.watch('js/*.js', function(){
        gulp.run('uglify-concat');
    });
});

这样就可以了：接下来介绍点细节与其它需要了解的。

gulp只有五个方法： task，run，watch，src，和dest，在项目根目录新建一个js文件并命名为gulpfile.js

另外，为何安装插件的时候需要加 --save-dev

是想把插件放入开发列表里面，这样 npm install初始化安装的时候，就会根据这个表来进行相应下载。

这个文件名为package.json

当然这个文件可以复制粘贴，当然有一种方法可以初始化它。

npm init

根据步骤提示就可以自动生成了。具体文档内容请参考。linlincat 的 github

这里面有个许可证号，之前是可随意配置的，现在不了解具体原因，默认就可以了。官网有详细解释。

现在就可以放心使用你的gulp去执行[管理]你的项目了。

{

"name": "test", //项目名称（必须）

"version": "1.0.0", //项目版本（必须）

"description": "This is for study gulp project !", //项目描述（必须）

"homepage": "http://www.dtao.org", //项目主页

"repository": { //项目资源库

"type": "git",

"url": "https://git.oschina.net/xxxx"

},

"author": { //项目作者信息

"name": "surging",

"email": "surging2@qq.com"

},

"license": "ISC", //项目许可协议

"devDependencies": { //项目依赖的插件

"gulp": "^3.8.11",

"gulp-less": "^3.0.0"

}

}