Question

我想知道其他人如何在CMS网站构建中自动化他们的JavaScript构建过程。

我目前使用Grunt自动化SASS-＆gt; CSS缩小功能，因为您不会使用压缩代码覆盖sass文件，因此非常有效。

你不能用JavaScript做同样的事情，因为你压缩它会覆盖你的JS。

显然你可以构建.min.js文件，但是你必须手动更新html模板中的文件名。

我也看过并完成构建，你有一个www文件夹，然后是一个构建文件夹;获取所有缩小资产的构建文件夹。这很不错，但根据我的经验，往往只适用于较小的静态网站。

我们一直在使用的一个想法是为生产JS提供一个unminified-js文件夹，然后将grunt构建到一个从模板中引用的脚本文件夹。

我们将非常感谢您对整洁过程的任何见解。

谢谢！

Answer 1

有connect任务，您可以在其中为more than one location提供单一路径。当页面查找文件时，它会在数组的第一个文件夹中查找它。如果没有，它将转到列表中的下一个，依此类推 - 但路径仍然指向第一个位置。

Answer 2

也许我不清楚你在问什么，但为什么不把你的缩小文件输出到你将用于制作的其他地方，并将原始JS文件放在一个单独的文件夹中，你可以编辑然后运行grunt把它们输出到其他地方。这是我在最近的一个项目中使用的示例grunt文件。

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
  appJs: {
    src: [
    './templates/*.js',
    './js/*.js'
    ],
    dest: '../js/featuredProduct.<%= pkg.version %>.js'
  }

},
handlebars: {
  all: {
    src: 'templates/*.hbs',
    dest: './templates/templates.js'
  },
  options: {
    namespace: 'Handlebars.templates'
  }
},
uglify: {
  options: {
    mangle: false
  },
  build: {
    files: {
      '../js/featuredProduct.<%= pkg.version %>.min.js' : ['../js/featuredProduct.<%= pkg.version %>.js']
    }
  }
},
watch: {
  handlebars: {
    files: './templates/*.hbs',
    tasks: ['handlebars', 'concat']
  },
  concat: {
    files: ['./js/**/*.js'],
    tasks: 'concat'
  },
  uglify: {
    files: ['../js/featuredProduct.<%= pkg.version %>.js'],
    tasks: 'uglify'
  }
}
});


//This task is a multi task, meaning that grunt will automatically iterate over all less targets if a target is not specified.
grunt.loadNpmTasks('grunt-contrib-handlebars');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task.
grunt.registerTask('default', ['handlebars','concat','uglify']);
};

使用Grunt构建可部署的JavaScript

2 个答案: