标签: gulp

我正在尝试总结我对最流行的JavaScript包管理器,捆绑包和任务运行器的了解.如果我错了,请纠正我:

• npm&bower是包管理员.他们只是下载依赖项,不知道如何自己构建项目.他们知道的是在获取所有依赖项之后调用webpack/ gulp/ grunt.
• bower就像npm,但是构建了扁平的依赖树(不像npm递归那样).含义npm获取每个依赖项的依赖项(可能会获取相同的几次),同时bower期望您手动包含子依赖项.有时bower并npm分别用于前端和后端(因为每兆字节在前端可能很重要).
• grunt并且gulp是任务运行者自动化所有可以自动化的东西(即编译CSS/Sass,优化图像,制作捆绑并缩小/转换它).
• gruntvs. gulp(就像mavenvs. gradle或配置与代码).Grunt基于配置单独的独立任务,每个任务打开/处理/关闭文件.Gulp需要的代码量较少,并且基于节点流,这使得它可以构建管道链(无需重新打开同一个文件)并使其更快.
• webpack(webpack-dev-server) - 对我来说,这是一个热门重新加载更改的任务运行器,可以让你忘记所有JS/CSS观察者.
• npm/ bower+ plugins可以替换任务运行器.他们的能力经常交叉,所以如果你需要使用gulp/ gruntover npm+插件,会有不同的含义.但是,跑步者的任务是复杂的任务肯定更好(例如,"每个建设创建捆绑,从ES6 transpile到ES5,在所有浏览器模拟器中运行它,使屏幕截图和部署通过FTP收存箱").
• browserify允许为浏览器打包节点模块.browserifyvs node的require实际上是AMD vs CommonJS.

问题:

1. 什么是webpack&webpack-dev-server？官方文档说它是一个模块捆绑器,但对我来说它只是一个任务运行器.有什么不同？
2. 你会在哪里使用browserify？我们不能对node/ES6导入做同样的事情吗？
3. 你什么时候使用gulp …

在这样的代码片段中:

gulp.task "coffee", ->
    gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean",->
    gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

在develop任务中我想要运行clean并在完成后运行coffee,当完成时,运行其他东西.但我无法弄明白.这件作品不起作用.请指教.

通常在Gulp任务中看起来像这样:

gulp.task('my-task', function() {
    return gulp.src(options.SCSS_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

是否可以将命令行标志传递给gulp(这不是任务)并让它根据具体条件运行任务？例如

$ gulp my-task -a 1

然后在我的gulpfile.js中:

gulp.task('my-task', function() {
        if (a == 1) {
            var source = options.SCSS_SOURCE;
        } else {
            var source = options.OTHER_SOURCE;
        }
        return gulp.src(source)
            .pipe(sass({style:'nested'}))
            .pipe(autoprefixer('last 10 version'))
            .pipe(concat('style.css'))
            .pipe(gulp.dest(options.SCSS_DEST));
});

我正在开发一个gulp用于编译和浏览器同步的网站,以保持浏览器与我的更改同步.

gulp任务正确编译所有内容,但在网站上,我无法看到任何样式,并且控制台显示以下错误消息:

拒绝应用' http:// localhost:3000/assets/styles/custom-style.css '中的样式,因为其MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查.

现在,我真的不明白为什么会这样.

HTML包含这样的文件(我非常肯定是正确的):

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

而样式表现在是bootstrap和font-awesome样式之间的合并(没有任何自定义).

路径也是正确的,因为这是文件夹结构:

index.html
assets
|-styles
  |-custom-style.css

但我一直在收到错误.

知道它可能是什么？对于gulp/browsersync这可能是什么(可能是一个设置？)​​？

任何帮助都非常感谢,如果需要,可以随时询问更多细节.

谢谢

2关于gulp的手册说我需要首先全局安装gulp(使用-g标志)然后再在本地安装一次.我为什么需要这个？

我想使用谷歌网络入门套件.我安装了node.js v0.12.0,node-sass&gulp.

然后跑了:

$ sudo npm install

当我键入gulp serve然后得到这个错误:

Using gulpfile ~/web-starter-kit/gulpfile.js Starting 'styles'... 'styles' errored after 93 ms 
Error: `libsass` bindings not found. Try reinstalling `node-sass`? at getBinding

我重新安装了node和gulp,但这没有用.

接下来我该怎么办？

通过npm 安装gulp.js后,从安装它的同一目录no command 'gulp' found运行gulp命令时收到错误.

在node_modules/.bin/目录下查看时,我可以在gulp那里看到可执行文件.

我的npm安装有问题吗？

我有一个gulp rjs任务连接和uglifies我所有的自定义.JS文件(任何非供应商库).

我想要做的是从这个任务(控制器和指令)中排除一些文件/目录.

继承我的树:

 - application
    - resources
      - js
        main.js
        - vendor
            - jquery
            - modernzr
            - angular
        - controllers
            - controller1
            - controller2
            - controller3
        - directives
            - directives1
            - directives2
            - directives3
        - widgets
            - widget1
            - widget2
            - widget3
            - widget4
        - modules
            - modules1
            - modules2
            - modules3
            - modules4

在这里,我的gulp.js

dir = {
    app:        'application',
    dest:       'dest',
};

config = {
    src: {
        js: dir.app + '/resources/js'
    },
    dest: {
        js: dir.dest + '/resources/js' …

我已经在全球和本地安装了gulp

npm install gulp
npm install gulp -g
npm install gulp-util
npm install gulp-util -g

当我尝试运行gulp我得到

'gulp' is not recognized as an internal or external command, operable program or batch file.

运行npm list gulp(或-g),我gulp@3.7.0有全局或本地gulp安装的位置.

我试过运行node gulpfile.js指向我的gulpfile,它运行没有错误,当然,它开始require('gulp').

关于让gulp在Windows上运行的任何建议(8.1)？

无论如何,当你使用webpack时,你可以阻止moment.js加载所有语言环境(我只需要英语)吗？我正在查看源代码,如果定义了hasModule,它是用于webpack,那么它总是尝试require()每个语言环境.我很确定这需要拉动请求来修复.但无论如何我们可以使用webpack配置修复此问题.

这是我的webpack配置加载momentjs

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

然后我需要它的任何地方我只需要('时刻')这可行,但它添加了大约250kb的不需要的语言文件到我的包.此外,我正在使用bower版本的momentjs和gulp.

此外,如果这不能通过webpack配置修复,这里是一个链接到它加载语言环境的函数https://github.com/moment/moment/blob/develop/moment.js#L760-L772我尝试添加"&& module.exports.loadLocales"到if语句,但是我认为webpack并不能以某种方式工作它只需要我认为它现在使用正则表达式所以我真的不知道你会怎么做去解决它.无论如何,谢谢你的帮助.