你,不曾劝我离开。我,也不曾劝你留下。你有你的坚持,我有我的执着。我们总以为我们所做的选择都是自主的,但事实上所有的选择,都是被迫的。迫于形势,迫于压力,迫于成长带来的责任感。无奈的是,语言这东西,在表达爱意的时候如此无力;在表达伤害的时候,却又如此锋利。生命无法用来证明爱情,就像我们无法证明自己可以不再相信爱情。不要因为众生的愚疑,而带来了自己的烦恼。不要因为众生的无知,而痛苦了你自己。在这个城市里,诚如劳力士是物质的奢侈品,爱情则是精神上的奢侈品。可是生命脆弱无比,根本没办法承受那么多的奢侈。在这个世界上,不是所有合理的和美好的都能按照自己的愿望存在或实现。人们宁愿去关心一个蹩脚电影演员的吃喝拉撒和鸡毛蒜皮,而不愿了解一个普通人波涛汹涌的内心世界……


一.首先需要安装node;然后通过npm安装。
1.全局安装  npm install -g gulp ;
2.安装项目依赖的插件 npn install --save-dev gulp
二.在项目根目录下创建一个名为gulpfile.js的文件,然后配置,引用需要的插件
文件夹目录为:

dream -> 
dist
demo 
res ->
css ->
demo
js ->
demo
img ->
demo
src ->
demo 
res ->
css ->
demo
js ->
demo
img ->
demo




 var gulp = require('gulp'),
     sass = require('gulp-sass'),
     autoprefixer = require('gulp-autoprefixer'),
     minifycss = require('gulp-minify-css'),
     jshint = require('gulp-jshint'),
     uglify = require('gulp-uglify'),
     imagemin = require('gulp-imagemin'),
     rename = require('gulp-rename'),
     clean = require('gulp-clean'),
     concat = require('gulp-concat'),
     notify = require('gulp-notify'),
     cache = require('gulp-cache'),
minifyHTML = require("gulp-minify-html");


 //这里是文件配置
 gulp.task('js-demo',function(){
 //需要编译的源代码
//配置文件路径
     return gulp.src(['src/res/js/demo/demo.js'])
     //js语法检测
         .pipe(jshint())
         .pipe(jshint.reporter('default'))
         //这里可以合并需要的文件,在数组后边添加需要合并的文件
         .pipe(concat(['demo.js']))
         //输出文件到dist目录
         .pipe(gulp.dest('dist/res/js/demo'))
         //重命名文件
         .pipe(rename({suffix:'.min'}))
         //压缩并混淆js
         .pipe(uglify({
             output:{
                 ascii_only:true
             }


         }))
         //输出压缩后的js
         .pipe(gulp.dest('dist/res/js/demo'))
 });


 gulp.task('html-demo', function () {
    gulp.src('src/demo/*.shtml')
      .pipe(gulp.dest("dist/demo"))
 });
 单个任务,处理css
 gulp.task("css-demo", function () {
    //配置文件路径
    return gulp.src('src/res/scss/demo/demo.scss')
    //执行的任务 每一个pipe代表一个任务,里边的插件根据自己的需要配置
    //编译sass文件
     .pipe(sass({ style: 'expanded' }))
     //补全属性前缀,
     .pipe(autoprefixer({
        browsers: ['> 1%'],
        cascade: false
     }))
     //输出到dist目录
     .pipe(gulp.dest('dist/res/css/demo'))
     //重命名文件
     .pipe(rename({ suffix: '.min' }))
     //压缩css
     .pipe(minifycss({ compatibility: 'ie8' }))
     //输出文件
     .pipe(gulp.dest('dist/res/css/demo'))
 })








 gulp.task("auto-demo", function () {
    gulp.watch("src/demo/*.shtml", ['html-demo']);
    gulp.watch('src/res/scss/demo/demo.scss', ['css-demo']);
    gulp.watch('src/res/js/demo/demo.js', ['js-demo']);
 });




 2.运行gulp
   可以输入 gulp xx-demo;  //执行单个任务
   输入 gulp auto-demo ;  //自动监听
三.插件可以在项目根目录新建一个package.json的文件,然后把项目需要依赖的插件用json的格式写入;
   之后通过 命令行工具进入项目根目录,执行 npm install 命令;自动安装
   常见的插件和配置如下

{
  "name": "dream",//项目名称
  "version": "1.0.0",//项目版本
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {//这里配置项目依赖的插件
    "browser-sync": "^2.9.10",
    "fd-gulp-chinese2unicode": "0.0.1",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-cache": "^0.3.0",
    "gulp-clean": "^0.3.1",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-minify-html": "^1.0.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.1"
  },
  "dependencies": {
    "jquery-placeholder": "^2.1.1",
    "process-nextick-args": "^1.0.3"
  }
 }





四.可以用browsersync工具配合gulp,调试根方便配置如下:

var gulp = require('gulp'),
     sass = require('gulp-sass'),
     autoprefixer = require('gulp-autoprefixer'),
     minifycss = require('gulp-minify-css'),
     jshint = require('gulp-jshint'),
     uglify = require('gulp-uglify'),
     imagemin = require('gulp-imagemin'),
     rename = require('gulp-rename'),
     clean = require('gulp-clean'),
     concat = require('gulp-concat'),
     notify = require('gulp-notify'),
     cache = require('gulp-cache'),
     browserSync = require('browser-sync'),
     babel = require("gulp-babel"),
minifyHTML = require("gulp-minify-html");
//browsersync 插件需要初始化
     var browserSync = require('browser-sync').create();
     var reload = browserSync.reload;


 //这里是文件配置
 //js文件处理
 gulp.task('js-demo01',function(){
     return gulp.src(['src/res/js/demo01/demo01.js'])
     .pipe(jshint())
     .pipe(jshint.reporter('default'))
     .pipe(concat('*.js'))
     .pipe(gulp.dest('dist/res/js/demo01'))
     .pipe(rename({suffix:'.min'}))
     .pipe(uglify({
         output:{
             ascii_only:true
         }




     }))
     .pipe(gulp.dest('dist/res/js/demo01'))
     //当文件发生变化时 插件会自动刷新页面
     .pipe(browserSync.stream());
 });


 //html文件处理
 gulp.task('html-demo01', function () {
     gulp.src('src/demo01/*.html')
     .pipe(gulp.dest("dist/demo01"))
     .pipe(browserSync.stream());




 });


 //css文件处理
 gulp.task("css-demo01", function () {
     return gulp.src('src/res/css/demo01/*.css')
     .pipe(autoprefixer({
         browsers: ['> 1%'],
         cascade: false
     }))
     .pipe(gulp.dest('dist/res/css/demo01'))
     .pipe(rename({ suffix: '.min' }))
     .pipe(minifycss({ compatibility: 'ie8' }))
     .pipe(gulp.dest('dist/res/css/demo01'))
     .pipe(browserSync.stream());
 })




 // 静态服务器
 //监听项目所有的任务
 gulp.task('demo01',function() {
//browsersync 服务器初始化
     browserSync.init({
     //配置文件夹根目录
         server: {
             baseDir: "dist",
              directory: true
         }
     });
     //执行任务的时候 browsersync 执行reload
     gulp.watch("src/demo01/*.html", ['html-demo01']).on('change', browserSync.reload);
     gulp.watch('src/res/css/demo01/*.css', ['css-demo01']).on('change', browserSync.reload);
     gulp.watch('src/res/js/demo01/demo01.js', ['js-demo01']).on('change', browserSync.reload);
 });


 最后在命行输入 gulp auto-demo;执行任务