Gulp基本操作

重要的事情说三遍，熟练操作gulp，可以大大地提高前端的工作效率哦!!!

名词解释：

前端自动化工具 :目前比较受欢迎的当属Gulp和Grunt了。那么它们的作用是什么呢？在前端开发中，项目上线前，通常会利用前端自动化工具做如下工作。比如：文件目录调整，HTML注释、换行等操作，CSS压缩合并，JS/CSS语法检测，JS代码压缩，图片压缩等等，通过利用工具，极好地提高了我们的工作效率。
Node :Node是一个服务器端 JavaScript 解释器。
Gulp :gulp是基于Nodejs的自动任务运行器,它能自动化地完成JS/CSS/HTML/IMAGE等文件的测试，检查，合并，压缩。
NPM :是随着nodejs一起安装的包的管理工具，在开发nodejs应用中，我们以来许许多多的第三方模块来提高效率，而这些第三方模块，是需要npm来辅助进行安装所需的package。

第一步：安装Node

搭建Node环境，访问https://nodejs.org/en/
下载完成后直接运行程序，npm会随着安装包一起安装，npm很有用。

第二步：使用命令行

命令行：OSX中的终端（Terminal），windows中的命令提示符（Command Prompt），常见的终端命令行有很多，可以搜索一下哦https://www.baidu.com/
确认Node是否安装成功，请执行以下命令。
node -v输入此代码回车，会看到安装的版本号。
npm -v输入代码回车，会看到npm的版本号。
如果以上没有显示，说明安装未成功。

第三步：安装gulp

sudo npm install -g gulp输入此代码回车

sudo是以管理员身份执行命令，一般要求输入电脑密码
npm是安装node模块的工具，执行install命令
-g表示在全局环境下安装，一边任何项目都能使用它。
gulp是将要安装的node模块的名字。
```
gulp -v 代码用来检测gulp是否安装成功。
npm install --save-dev gulp将gulp安装到项目本地。
```
这里使用–save-dev来更新package.json文件，更新devDependencies值，当其他模块需要依赖当前模块的时候，通过 npm install 自动下载安装dependencies。

第四部：新建Gulpfile文件，运行gulp

安装依赖

npm install gulp-jshint
 			gulp-sass
 			gulp-concat 
 			gulp-uglify 
 			gulp-rename
 	 --save-dev 
 /*如果以上命令运行失败，需要添加sudo再次尝试。*/

新建gulpfile文件

现在，组件安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

gulp有5个方法task run watch src test 在项目根目录新建一个js文件并命名为 gulpfile.js ，把下面的代码粘贴进去,*代表所有文件：

 var gulp = require("gulp")/*引入gulp*/

 var jshint = require("gulp-jshint");
 var sass = require ("glup-sass");
 var concat = require("gulp-concat");
 var uglify = require("gulp-uglify");
 var rename = require("gulp-rename");/*以上为引入组件，分开创建lint，sass，scripts，default四个不通的任务*/

 gulp.task("lint",function(){
     gulp.src("./js/*.js")
     .pipe(jshint())
     .pipe(jshint.reporter("default"));
     }) /*检查脚本有没有报错或者警告*/         

gulp.task("sass",function(){
    gulp.src("./.scss/*scss");
    .pipe(sass())
    .pipe(gulp.dest("./css"))
}) /*sass任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到css目录中*/    
gulp.task(“script”,function（）{
    gulp.src("./js/*.js")
    .pipe(concat("all.js"))
    .pipe(gulp.dest("./dist"))
    .pipe(rename("all.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("./dist"))
})/*合并压缩文件*/

gulp.task("default",function(){
    gulp.run("lint","sass","script")
})/*默认任务*/


gulp.watch("./js/*.js",function(){
    gulp.run('lint', 'sass', 'scripts')
})/*监听文件变化*/

现在都完成了，让我们回到终端运行一下吧。

直接运行gulp任务

gulp

运行gulpfile.js中定义的任意任务，比如，现在运行sass任务：

gulp sass