npm使用过程

-npm
+ node package manager (node的包管理工具)
+ npm install xxx 安装一个包到项目本地
+安装完成后项目根目录下会多一个node_modules文件夹，所有的下载

下来的包全部在里面
+ 由于需要记录项目依赖哪些东西，所以需要一个配置文件，

package.json，通过npm init命令生成。
+ 以后安装包的时候将其–save
+ –save就是将我们安扎un个的包名字和包版本记录到配置文件中的

dependencies节点中
+ –save-dev
+ 项目依赖分两种，一个就是普通的项目依赖比如bootstrap，还有一

中只是开发阶段需要用的，这种属于开发依赖比如gulp,开发依赖最终

记录在devDependencies节点里面
+ npm install xxx -g (全局安装包)

+如果你安装的是一个工具，工具要在每一个地方都能用

1.命令行创建npm的配置文件
npm init
2.添加一个gulp的依赖
npm install gulp –save-dev
3.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，

这个文件名是固定的。
4.在gulpfile中抽象我们需要做的任务
gulpfile.js
/**
1.less编译 压缩 合并
2.js合并 压缩 混淆
3.img复制
4.html压缩
*/

package.json

{
  "name": "10-gulp-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-htmlmin": "^3.0.0",
    "gulp-less": "^3.3.0",
    "gulp-uglify": "^2.0.1"
  }
}

gulpfile.js

'use strict';
/**
*1.less编译 压缩 合并
*2.js合并 压缩 混淆
*3.img复制
*4.html压缩
*/
//在gulpfile中先载入gulp包，因为这个包提供了一些api
var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//1.less
gulp.task('style',function(){
    //这里是在执行style任务时自动执行的
    gulp.src('src/styles/*.less')
    .pipe(less())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({
        stream:true
    }));
});

//2.js
gulp.task('script',function(){
    gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
        stream:true
    }));
});


//3.img复制
gulp.task('image',function(){
    gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
        stream:true
    }));
});

var htmlmin = require('gulp-htmlmin');

//4.html复制
gulp.task('html',function(){
    gulp.src('src/*.html')
    .pipe(htmlmin(
        {
            collapseWhitespace:true,
            removeComments:true 
        }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
        stream:true
    }));
});



var browserSync = require('browser-sync');

gulp.task('serve',function(){

    browserSync({
        server:{
            baseDir:['dist']
            }
    },function(err,bs){
        console.log(bs.options.getIn(["urls","local"]));
    });

    gulp.watch('src/styles/*.less',['style']);
    gulp.watch('src/scripts/*.js',['script']);
    gulp.watch('src/images/*.*',['image']);
    gulp.watch('src/*.html',['html']);

});