傻傻分不清gulp和webpack以及nodejs 和 npm的

分清楚 库，框架，构建工具、 插件的作用。
你只需要引用或者调用，就可以直接用，并不会对你做太多约束。那么这种大部分都称之为库。如jQuery
需要按照他的标准构建文件结构或者文件夹结构或者代码书写方式那么这东西可以称之为框架，一般框架都是多种组合在一起的。如React+gulp 或者 jQuery mobile
解决开发过程中重复或者需要自动化智能化完成事情，也就是构建工具。如grunt和gulp
基于 库，框架，工具，提供的补充优化的模块就叫做插件。 

作者：dabaii
链接：https://www.zhihu.com/question/30597893/answer/59197296

说到构建工具，我往往会在前面加「自动化」三个字，因为构建工具就是 用来让我们不再做机械重复的事情，解放我们的双手的。

举个栗子：

我喜欢使用 CoffeeScript/ES6 去代替 Javascript，但浏览器对这些语言是不支持或者支持得不完整的，那么我需要把它编译成 Javascript(ES5)，让它可以在浏览器里运行起来，那么我要如何做呢？

a.coffee

console.log 'Hello World'

执行编译命令

coffee -c a.coffee

得到 a.js

(function(){
  console.log('Hello World');
}).call(this);

执行压缩丑化命令

uglify -s a.js -o a.min.js

得到 a.min.js

(function(){console.log("Hello World")}).call(this);

如果我们现在需要修改一下代码，比如在 Hello World 后面加一个感叹号，那么上面那两条命令就又要再执行一遍了。

同样的，我们会用 Less 去写 CSS，会用 Jade 去写 HTML，会用 Browserify 去模块化、为非覆盖式部署的资源加 MD5 戳等等。所有的一切，如果用手动来做，简直要疯了！而自动化构建工具，就是为我们完成这一套重复而机械的工作的。

以 gulp 为例，编写 gulpfile.js：

gulp   = require('gulp')
coffee = require('gulp-coffee')
uglify = require('gulp-uglify')
rename = require('gulp-rename')

file = './src/js/a.coffee'

gulp.task('coffee', function(){
    gulp.src(file)
        .pipe(coffee())  // 编译
        .pipe(uglify())  // 压缩丑化
        .pipe(rename({
            extname: ".min.js"
        }))              // 重命名
        .pipe(gulp.dest('./build/js'))
})

gulp.task('watch', function(){
    gulp.watch(file, ['coffee'])
})

gulp.task('default', ['coffee'])

这样，我只要执行一下 gulp watch，它就可以自动监视 a.coffee 的变化，每次修改 a.coffee 并保存后，它就会自动执行编译->压缩丑化->重命名这一系列动作了。

自动化构建工具是前端工程化必不可少的，希望这个简单的栗子能帮助到你。

  作者：Jasin Yip
链接：https://www.zhihu.com/question/35595198/answer/67223812