前端工具Gulp的学习

   好久之前就据说过，若是想在作好一个真正的web前端工程师，必需要会自动化构建工具。好比Grunt,Gulp,webpack。总听大神说用这些工具来构建一个自动化的前端环境，什么文件压缩，文件合并，js语法检查，css自动添加前缀，编译less/sass，自动刷新页面，文件重命名等。配置好文件后，一个命令就能让整个流程跑起来。想一想也是多么的炫酷，因而，带着种种疑问，从上周就开始了对Gulp的学习，一周时间算是对Gulp有个入门的了解了，也踩了很多坑。

   先搭建一个环境吧。准备步骤。（直接口述了，就不放图了。）

    1，到nodejs官网下载一个nodejs安装程序，而后安装nodejs，点击默认安装就好了。此时，会自动给系统添加一个环境变量，所以在系统的Path环境变量中就会有nodejs的安装路径，若是没有，本身手动添加便可。

    2，因为如今nodejs都集成了npm，所以，打开命令行工具后，依次输入 node -v  ,  npm -v 看看是否可以成功打印出 版本号，若是以为npm版本太低，能够 用 npm i npm -g更新。i是install的缩写。此外还能够用   npm config get prefix 找到npm的安装路径。

    3，全局安装 gulp， npm install gulp -g  ,安装完成后，gulp就安装在了npm下面的node_modules文件夹下。

    4，增长系统NODE_PATH的环境变量，通常都是在    C:\Users\Administrator(这个根据你你本身的定)\AppData\Roaming\npm\node_modules。

    5，设置完成后，cmd中输入 gulp -v ,若是可以正确输出版本号，说明下载gulp成功，环境配置也成功了。

    6，实战demo了。此时咱们找个位置，好比桌面上，新建一个文件夹，建好目录结构。好比取名  gulp-demo，完后咱们cd desktop/gulp-demo,就进入了gulp-demo项目了。首先，咱们输入命令npm init,一路enter,该命令会保存咱们的所用到的以及配置的信息。方便咱们在另外一个环境上按照上面的信息来安装包。而后咱们须要在本地，也就是在项目内安装gulp以及各类模块。       npm i gulp --save-dev     （--save就会将模块信息保存到package.json中）  。

再在根目录新建一个gulpfile.js文件，来配置咱们的任务。

    7，文件合并，文件压缩，语法检查，监听文件变化。先搞这四个吧。

    

var gulp = require('gulp');
var jshint = require('gulp-jshint');//语法检查
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩代码
var rename = require('gulp-rename');//重命名
// 语法检查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并文件以后压缩代码
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

 

 因为本人也还刚处于入门阶段，若是有不对的地方，但愿批评与指教。3q。