npm与gulp的使用

npm与gulp的使用
这边将工作中使用的npm以及gulp的一些方法做了整理,方便以后查阅,至少不用去麻烦度娘了~

A.npm的使用：

1.在你所需要的文件夹里面初始化npm–> npm init -y —>会生成一个package.json文件

2.根据需要下载相应的文件–> npm install jquery --save 或者 npm install jquery --save-dev —>这两种做法都会在package.json文件里面生成一个当前文件的版本号，并且该指令还会生成一个node_modules文件夹，下载的文件放在文件夹中

B.gulp的使用：

1.将上述A中生成的package.json文件拷贝到当前文件夹下面，为的是下载package.json里面的文件

2.安装gulp，通过npm来安装 —> npm install gulp-cli -g —>(g指的是全局的)

3.在当前项目中安装gulp —> npm install gulp --save

4.在当前项目中新建一个文件 —> gulpfile.js —>在这个文件里面写gulp指令

此时就可以使用了，在使用之间先将gulp里面的一些方法列举出来：1–> gulp.task(“任务名称”,function(){}); -->使用时: 在git里面敲上：gulp 任务名称

2–> gulp.src([‘文件路径1’,‘文件路径2’]); -->当有多个路径时要用数组的形式传递参数

3–> gulp.dest(‘文件路径’); -->指定最终处理之后的文件的存放路径

4–> gulp.watch(); -->自动监视文件的变化，然后执行相应的任务

5.在执行前要下载相应的文件：1-- 对多个文件进行合并 -->npm install gulp-concat --save

2-- 对js文件进行压缩 -->npm install gulp-uglify --save

3-- 对css文件进行压缩 -->npm install gulp-cssnano --save

4-- 对html文件进行压缩 -->npm install gulp-htmlmin --save

6.举个栗子：

在该文件夹下有个js文件夹，里面有a.js 和 b.js，现在要将这两个合并且压缩到test文件夹下面的js文件夹中,即js/a.js,b.js ----> test/js/test.js

过程：

在git里面的操作：

npm install gulp-concat --save

npm install gulp-uglify --save

在gulpfile.js里面的操作：

var concat = require(‘gulp-concat’)

var uglify = require(‘guulp-uglify’)

gulp.task(‘script’,function(){

gulp.src([’./js/a.js’,’./js/b.js’])–>合并之前的文件名称

.pipe(concat(‘test.js’))–>这边是合并之后的文件名称

.pipe(uglify())

.pipe(gulp.dest(‘test/js’))

})

在git里面的操作：

gulp script -->相当于执行上面的操作