npm gulp安装

1.安装npm
首先要安装 Node.js， Node.js 自带了软件包管理器 npm，nodejs官网：https://nodejs.org

2.安装gulp
全局安装：
命令行：^npm install gulp
安装完成后可以输入命令：gulp -v查看相应版本号，说明安装成功。

3.配置项目
a.配置package.json
*可以直接记事本新建一个
*或者用npm init 一路回车新建一个
*或者复制之前项目的package.json

json代码：

{
  "name": "gulp_test",
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC" 
}

其中name是项目名， 切记命名不要与模块一样，如命名为gulp，要地安装gulp时就会出错；license是项目许可协议。
4.本地安装gulp及gulp插件
转到项目目录下，命令行：npm install gulp –save-dev
本地安装完成后会在package.json的devDependencies即项目依赖中添加gulp及版本

大家可能会觉得有些奇怪，刚不是安装了gulp吗？对，那是全局安装，为的是能在端终运行gulp任务的，这里是项目级别的安装，真正的gulp模块安装到项目的node_modules/下了，后面的插件都是依赖gulp模块的。

5.本地安装gulp常用插件
同样是项目目录下，命令行：^npm install –save-dev gulp-uglify gulp-concat gulp-minify-css
这里我安装的时候有一个失败提示，大意是gulp-minify-css已经废弃，请安装gulp-clean-css
我们根据提示再安装一下这个gulp-clean-css就可以了，^npm install gulp-clean-css –save-dev
安装完成以后同样的package.json中会增加项目依赖项

6.创建gulpfile.js
在项目根目录下创建gulpfile.js文件:

js代码：

/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//压缩
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css/'));
});
//
gulp.task('script', function () {
    gulp.src(['src/a.js',"src/b.js"])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
gulp.task('default',['minify-css','script']);

7.运行gulp
全部安装完成以后，运行gulp就比较简单，如压缩css,命令行：^gulp minify-css 压缩后的文件保存在项目目录下的dist/css文件夹中，这个路径是我们再gulpfile里面配置的，可以修改。

欢迎分享本文，转载请保留出处：前端ABC » npm gulp安装