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安装

赞 (1)
分享到:更多 ()

发表评论 0