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" } }