gulp最佳入门@小四

一、安装nodeJs

  1. 说明:gulp是基于nodeJS,理所当然需要安装nodeJS;
  2. 安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)
  3. node -v 查看安装的nodeJS版本,出现版本号,说明安装正确。PS:未能出现版本号,请尝试注销电脑重试。
  4. npm -v 查看npm的版本号,npm是在安装nodeJS时一同安装的nodeJS包管理器;

二、npm介绍

  1. 说明:npm(node package manager)nodeJs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);
  2. 使用npm安装插件:npm install [-g] [--save-dev]
    2.1 :node插件名称,例如:npm install gulp-less --save-dev
    2.2 -g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;非全局安装:将会安装在当前定位目录;全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用。
    2.3 --save:将保存配置信息至package.json(package.json是nodeJS项目配置文件);
    2.4 -dev :保存至pageage.json的devDependencies节点,不指定-dev将保存在dependencies节点;
    2.5 为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install --production只下载dependencies节点的包)。
  3. 使用npm卸载插件:npm uninstall [-g] [--save-dev] PS:不要直接删除本地插件包
    3.1删除全部插件:npm uninstall gulp-less gulp-concat......?太麻烦
    3.2 借助rimraf:npm iinstall rimraf -g 用法:rimraf node_modules
    3.3 使用npm更新插件:npm update [-g] [--save-dev]
    3.4 更新全部插件:npm update [--save-dev]
    3.5 当前目录已安装插件:npm list
    3.6 查看npm帮助:npm help

三、选装cnpm

  1. 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常;
  2. 淘宝镜像官网:http://npm.taobao.org/
  3. 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
    注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm;安装命令:npm i -g cnpm

四、全局安装gulp

  1. 全局安装gulp目的是为了通过她执行gulp任务;
  2. 命令提示符执行cnpm install gulp -g
  3. 查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装;

五、新建package.json文件

  1. package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
  2. 命令提示符执行npm init
    注:package.json不能添加注释

六、安装gulp插件

1.定位目录后命令提示符执行npm install gulp-sass --save-dev

  1. 将会安装在node_modules的gulp-sass目录下
  2. 为了能正常使用,我们还得本地安装gulp:npm install gulp --save-dev
    PS:我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

七、新建gulpfile.js文件

  • gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通JS文件(其实将gulpfile.js放入其他文件夹下亦可)
/* create by wyunfei */
let gulp = require('gulp'); // 引入本地gulp
var concat = require('gulp-concat'); // 合并JS的插件
/*
  task定制任务
* src方法是指定需要处理的源文件的路径
* dest方法是指定处理完后文件输出的路径;
* .pipe()管道,前一个的输出就是后一个的输入
* */
// 配置合并js任务
gulp.task('jsTask', function () {
    gulp.src('./src/components/**/*.js') // 第一步:找到原材料(源文件)
        .pipe(concat('all.js'))   // 加工
        .pipe(gulp.dest('./dist/js')) // 出厂
})

// 在小黑窗执行"gulp jsTask" 命令就可以在根目录下生成dist/js/all.js文件

八、运行gulp

8.1,命令提示符(小黑窗)执行:gulp 任务名称
8.2,合并js:执行gulp jsTask命令
8.3,当执行gulp default或gulp将会调用default任务里的所有任务[‘jsTask’,’...’]

同学们听我说

你可能感兴趣的:(gulp最佳入门@小四)